Veerle's blog

This CSS tip is really basic, and I’m sure a lot of people who are comfortable working with CSS won’t probably learn anything new here, but I thought I just share this anyway. I believe this is a very useful tip for people just starting out. It’s about how you add a background image to a heading 2 element and have it perfectly aligned on the right side of the text while keeping the default block element behavior.

Placing a CSS background image horizontally right on an h2 element

If you align a background image horizontally right in a block element, such as a heading, the image will appear on the right, like this:

Check out this real example.

The h2 styling consists of font-size, some extra padding (30 pixels on the right, which is the space that is needed for the background image), margin at the bottom, a border at the bottom and color:

1. h2 {
2. font-size: 1.35em;
3. padding:.4em 30px .4em 0;
4. margin:0 0 1em 0;
5. border-bottom: 1px solid #e3f5f7;
6. color: #89b8c7;
7. }

The HTML code of these 2 headings looks like this:

1. <h2 class="clock">Suspendisse nec dolor proin sodales</h2>
2. <h2 class="star">Class aptent taciti sociosqu ad</h2>

Adding 2 different background images by using a class for each and have both images aligned vertically centered to the right:

1. h2.clock {
2. background: url(images/icon-clock.gif) no-repeat right center;
3. }

1. h2.star {
2. background: url(images/icon-star.gif) no-repeat right center;
3. }

What if we want our background image lined up to the right of the text?

What if we want to achieve is this (see image below)?

Placing a CSS background image horizontally right on an h2 element, adding 'display:inline'

We could try adding 'display:inline' to the h2 element. This will change its default behavior from being a block element into an inline element.

We add 'display:inline;':

1. h2 {
2. font-size: 1.35em;
3. padding:.4em 30px .4em 0;
4. margin:0 0 1em 0;
5. border-bottom: 1px solid #e3f5f7;
6. color: #89b8c7;
7. display:inline;
8. }

Check out this real example.

However doing this may cause some layout problems, because headings are meant to behave as a block element.

Problem: collapsing margins

One of the problems is that the following item will float next to the heading if this element is an inline element. Another problem is that the margins of a block element such as a paragraph will collapse.

Placing a CSS background image horizontally right on a h2, using a nested span element

A solution to this is adding a span element in the h2. Give the span the necessary padding (especially on the right) and add the background image to the span instead of the h2.

By nesting an inline element such as a span, we keep the block behavior of the heading.

1. <h2 class="clock"><span>Suspendisse nec dolor proin sodales</span></h2>
2. <h2 class="star"><span>Class aptent taciti sociosqu ad</span></h2>

We go back to our original CSS styling, so we remove the 'display:inline' and we also leave out the 30 pixels for the right side padding:

1. h2 {
2. font-size: 1.35em;
3. padding:.4em 0;
4. margin:0 0 1em 0;
5. border-bottom: 1px solid #e3f5f7;
6. color: #89b8c7;
7. }

Instead, we add the right side padding and the background image to the nested span element:

1. h2.clock span {
2. padding-right:30px;
3. background: url(images/icon-clock.gif) no-repeat right center;
4. }

1. h2.star span {
2. padding-right:30px;
3. background: url(images/icon-star.gif) no-repeat right center;
4. }

Check out this real example.