1

I have headings on my site, each of which has an image before it.

HTML

<section id="about">
    <h2>About</h2>
    <p>Some stuff about it</p>
</section>
<section id="where_to_buy">
    <h2>Where to Buy</h2>
    <p>Some info on where to buy</p>
</section>

CSS

h2 {
    padding-left: 24px;
    background-repeat: none;
}

#about h2 {
    background-image: url(../images/about.png);
}

#where_to_buy h2 {
    background-image: url(../images/where_to_buy.png);
}

With lots of headings this means lots of tiny pngs, which I'd like to combine into a single CSS sprite to reduce the number of HTTP requests. However, the only way I can think of doing it requires introducing a new element into the markup, which I'd rather avoid.

HTML

<section id="about">
    <h2><span class="icon"/>About</h2>
    <p>Some stuff about it</p>
</section>
<section id="where_to_buy">
    <h2><span class="icon"/>Where to Buy</h2>
    <p>Some info on where to buy</p>
</section>

CSS

h2 .icon {
    width: 24px; height: 24px;
    display: inline-block;
    background: url(../images/heading_icons.png) no-repeat;
}

#about h2 .icon {
    background-position: 0 0;
}

#where_to_buy h2 {
    background-position: -24px 0;
}

Is there any effective way to introduce CSS sprites without introducing needless new elements to the markup?

1
  • Do you have an example of what the headings and images look like.
    – b01
    Oct 16, 2011 at 18:39

3 Answers 3

2

You could use a CSS sprite that is loaded for all h2 elements.

h2 {
  background: url(...);
}

Then you set the position for a specific section to just show the sprite for the about section., e.g.

#about h2 {
  background-position: 0 50px;
}
1
  • What about the icon of one header showing on another because the text wrapped to the next line.
    – b01
    Oct 16, 2011 at 18:46
0

I think in your case the simplest solution would be to create a sprite on which your icons appear vertically listed, so you don't have to worry about cropping the background image (which I think your problem is). Then you could simply use

background-position: 0 <your icon's size * # of icon>px;
background-repeat:no-repeat;

to control which icon you want to show.

Edit: one other solution came to my mind, to use pseudo elements, like :after, or :before. Than your markup does not need to introduce a new element, but there will be one. Let me explain by commented example:

#contact:before {
    content:''; /* this is required for the generated element to show up */
    display: inline-block /* this makes it sizeable and also well positioned */
    width: 32px; /* I assume your icon size is 32 pixel, but change it */
    height: 32px;
    background-position: 32px 64px; /* this way you can position your background
                                       both horizontally and vertically */
    background-image: url('bla');
}
0

Option 1:

Depending on your sprite image and the heading text. You might be able to pull it off. But without the extra span tag, you would NOT have any real control; as part of the background for one header may show up on another. What I mean is, if on headers text was to wrap to the next line then it may show the next headers icon. You'd have to leave the correct amount of spacing around each icon to get it to work the way you want. Basically you'd have to leave a certain amount of space around each icon in your sprite, then you can do what @endyourif suggested along with @Barta Tamás.

Option2:

If you don't care about browser backwards compatibility and CSS3 is an option, you may be able to use background-clip property.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.