You are looking at archived content. The hot new stuff is happening at Veerle's blog 3.0. You should check it out!

May 06

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

2009 at 09.19 am posted by Veerle Pieters

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:

Placing a CSS background image horizontally right on a h2 element

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)?

have the background image aligning to the right of the text

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.

Adding display inline to a h2 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

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.

Solution: using a span element

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.


28served

gravatar

1

permalink this comment joggink Wed May 6, 2009 at 10.03 am

Couldn’t you have used display: inline-block?


gravatar

2

permalink this comment Marco Wed May 6, 2009 at 10.26 am

Looking VERY nice Veerle, never thought of this. Easy, yet effective: Something we’re all trying to achieve.

Once again thanks for this useful information!


gravatar

3

permalink this comment Tracey Grady Wed May 6, 2009 at 11.22 am

Hi Veerle,
I use something similar to the first stage example for the headings on my blog (although in my case the image sits on the left hand side and slightly behind the heading text). It’s very interesting to look at the new possibilities you’ve demonstrated here.


gravatar

4

permalink this comment Venkat Wed May 6, 2009 at 01.08 pm

The 3rd Version of this article is helpful to me, I used to do float/clear, instead of display: inline.

Can you also add another version which has the bg icon as link? Which will be useful to have “?” icons and help tips? I want to know whether there is easier method exists for that or not.

Thanks


gravatar

5

permalink this comment Aaron Witherow Wed May 6, 2009 at 01.52 pm

Or you could remove the span and use inline-block, some work arounds would be needed for firefox 2 but an extra span would not be required.

Still yours is a very useful technique and one I use quite often.


gravatar

6

permalink this comment Veerle Pieters Wed May 6, 2009 at 03.16 pm

joggink said:

Couldn’t you have used display: inline-block?

I didn’t use this because it’s not ‘really’ supported in IE6 and 7 and also not in Firefox 2. I explicitly used a bottom-border to show the different results. With display:inline-block the border doesn’t go all the way to the right, so it’s also different and not the result that I wanted to achieve.

Venkat said:

Can you also add another version which has the bg icon as link? Which will be useful to have “?” icons and help tips? I want to know whether there is easier method exists for that or not.

I think I would wrap the text of the title between spans and add the word ‘help’ in an ‘a href’ within the ‘h2’ element. Like this:

<h2><span>Class aptent taciti sociosqu ad</span> <a href="#" class="help">help</a></h2>

Then add a float:left to the ‘span’ and the ‘a’ element. Use display:block; for the ‘a’ element and a negative ‘text-indent’.

View this demo page. I’ve briefly checked this indifferent browsers, but I believe all looks fine in IE6.


gravatar

7

permalink this comment Shad Wed May 6, 2009 at 03.28 pm

Nice tip, and timely as I’m composing an internal newsletter for my company and have that very scenario. Thanks!


gravatar

8

permalink this comment Terjin Wed May 6, 2009 at 04.31 pm

Veerle,

What about using background position? Wouldn’t that work as well?


gravatar

9

permalink this comment Chris Wed May 6, 2009 at 04.44 pm

Very well explained and very useful! Thanks for posting and “tweeting” the link.


gravatar

10

permalink this comment JamesSpratt.org Wed May 6, 2009 at 05.42 pm

Thanks, just the snippet of css I was looking for.


gravatar

11

permalink this comment Bill Lowden Thu May 7, 2009 at 01.51 am

Nice tip thanks for detailing other options and explaining why using a span is the best option.


gravatar

12

permalink this comment Jan Thu May 7, 2009 at 07.02 am

Simple but very helpful tut! Thanks, Veerle!


gravatar

13

permalink this comment Veerle Pieters Thu May 7, 2009 at 08.26 am

Terjin said:

What about using background position? Wouldn’t that work as well?

Not really, since you can’t define the exact horizontal position. It depends on the width of the title text, which you don’t know, because it needs to work with any length of text. It needs to be flexible if you know what I mean.


gravatar

14

permalink this comment David Hellmann Sat May 9, 2009 at 01.18 pm

i think v1 and v3 works with background position. h2 with padding: 0 40px 0 0; and the image backround: img… right center. Or not?


gravatar

15

permalink this comment Veerle Pieters Sun May 10, 2009 at 10.45 am

David Hellmann said:

i think v1 and v3 works with background position. h2 with padding: 0 40px 0 0; and the image backround: img… right center. Or not?

Not sure what your point is here. Don’t want to sound rude or anything, but did you actually read my article? :)


gravatar

16

permalink this comment David Hellmann Sun May 10, 2009 at 11.21 am

Haha, sorry i’m so drugged :) i dont write any post afert 12pm :)


gravatar

17

permalink this comment vanni Mon May 11, 2009 at 07.33 pm

I never fail to learn something new about CSS even when i think i know a fair bit. Many thanks Veerle… a very timely and useful tip.


gravatar

18

permalink this comment Kent Wed May 13, 2009 at 05.01 pm

Great stuff!  I’m using this with some JQuery to create some neat link effects!


gravatar

19

permalink this comment vanni Wed May 13, 2009 at 05.44 pm

@Kent - perhaps you could share this neat stuff with us, or with Veerle so she can do a follow up tutorial.


gravatar

20

permalink this comment Matthew Pennell Thu May 14, 2009 at 10.45 am

You don’t actually need to specify the center alignment for vertical aligning of background images - the default is center:

background: url(pic.gif) no-repeat 100%;

(and 100% saves you a character as well!)


gravatar

21

permalink this comment Richard Thu May 14, 2009 at 05.12 pm

Thanks Veerle. This simplifies things quite a bit. Allowing for less code and less markup in the page. I always like the text indent option to replace text with images. Very search Engine friendly, while allowing more freedom for the design.


gravatar

22

permalink this comment Lieven Fri May 15, 2009 at 08.28 am

Nice post Veerle, this will make (i hope everybody reads this) the web a little more prettier!


gravatar

23

permalink this comment Gilsinger Tue May 19, 2009 at 11.42 pm

Would an :after pseudo-element give the same results with much simpler coding, albeit with less cross-browser compatibility.


gravatar

24

permalink this comment D Bui Wed May 20, 2009 at 10.29 pm

Thanks for the tips.. I am using this method for the footer in my website ;D


gravatar

25

permalink this comment xanadu Fri May 22, 2009 at 06.26 am

Your article is very nice and I love it very much. Thanking for posting


gravatar

26

permalink this comment Живко Tue Jun 2, 2009 at 04.24 pm

I think the most painless solution to this is positioning the nested span element absolutely to the right, and of course making h2’s position relative.

It will work even in IE 6 :) although, we have to put both values, right and top, even if it’s zero.

I think that way is better for beginners because all browsers tend to treat simple positioning like this the same. No margins + no padding = happy browsers :)


gravatar

27

permalink this comment Veerle Pieters Tue Jun 2, 2009 at 05.52 pm

Живко said:

I think the most painless solution to this is positioning the nested span element absolutely to the right, and of course making h2’s position relative.

Uhm, you lost me :) How do you absolute position the span to the right? My text is nested into the span and should be left. The background image which is linked to this span should be aligned to the right, OK, but its position depends completely on the length of the text. Unless I don’t get what you are saying, this doesn’t make sense to me. Feel free to explain and show a simple example.

It will work even in IE 6 :) although, we have to put both values, right and top, even if it’s zero.

Cool, but my technique works well in IE6 too.

I think that way is better for beginners because all browsers tend to treat simple positioning like this the same. No margins + no padding = happy browsers :)

True, but in my example it doesn’t give any trouble. No CSS fixing is needed. Still I believe it’s a pretty straightforward technique, not really complex.


gravatar

28

permalink this comment Gilsinger Tue Jun 2, 2009 at 08.34 pm

If you absolute position the span-containing image absolutely it will remove it from the flow of the document and as such will need to be manually adjusted for every modification. In addition you would have to add a lot of superfluous code to set size and position unless there’s some trick I’m missing here.

Veerle’s technique works brilliantly cross browser with considerably less code and zero maintenance. (Although I’d still personally use an :after element)



Commenting is not available in this weblog entry.

Flickrness

buy something from my Amazon wishlist