Icon Styled Headings

Certainly one of the most powerful features of CSS is
background or background-image. Holding interface images within one file
makes for a very flexible and easily adaptable site.

One of my favorite methods is applying a background to certain heading tags within
a document. Such as a left aligned bullet. Using background instead of hard-coding a
bullet within each tag has obvious benefits. Don’t like the particular image you’ve used? Change one
line in your CSS file and the entire site changes instantly. It also keeps the HTML code lighter by
removing the need to repeat all those img tags for each heading.

As an example, I’ve just recently changed this site’s right column to render all h3s with the box
icon aligned to the left of the text. The CSS goes something like this:

#right h3 {
padding: 0 0 6px 19px;
border-bottom: 1px dashed #ccc;
background: url(../images/box_bullet.gif) no-repeat 0 2px;
}

This will insure any h3 tags within the right column to show the box bullet to the let
of the text. An appropriate amount of padding to the left makes this work. Also, the 0 2px
portion of the background rule tells the browser to place the image 0 pixels from the left
and 2 pixels from the top. This is key for lining up the image with the text just right.

The same idea can be applied to most anything — and especially nice for unordered lists (which was originally pointed out to me by Doug). Instead of using the normal list-style-image rule (which doesn’t always line the bullet image up correctly in every browser), try using background on li elements and lining up with the top/left pixel values.

15 Comments

  1. youssef says:

    hello

  2. youssef says:

    hello

  3. messef says:

    goodbye

  4. John says:

    I love this idea – trouble is, I’d like them to print out, but being backgrounds they don’t with the default Win / IE settings. Any suggestions?

  5. Ryan says:

    This is superb, and makes it dead easy to add new headers with just the (or whatever) tag.

  6. Shags says:

    Actually because they don’t print out it is ideal! Usually when you print a page you get bits and pieces of images everywhere.

  7. Ranny Bayuga says:

    This is awesome! I was wondering how your were placing those images and I couldn’t find the img tags!

  8. Sushubh says:

    Thanks. Needed just this because IE does not take the direct approach.

  9. Zappho says:

    It would be great if you included an images of your example on this page.

  10. anon says:

    Printing background images is entirely up to the user (a hidden setting). You’ll just have to tell them that…

  11. steve says:

    or you could set up a CSS style for printing

  12. Classic script, still useful nowadays! thx

  13. Binny V A says:

    Thanks – I should use this somewhere.

  14. Bauhaus says:

    This is a fantastic tip… I’ve used this before and I have to admit it makes life a LOT easier when you want to update the look of your website!