Simple Sprite Not Working

[CrownOfMars]

Hey guys, why isn’t this working?

CSS

.icon { position: absolute; top: 0; left: 0; width: 50px; height: 50px; background: url(../../images/icons.png); }

.icon .home { background-position: 0 0; }

.icon .news { background-position: -50px 0; }

HTML

Welcome


Latest News

The home icon appears in both headers, the background-position just isn’t being applied. I know its something simple!

Thanks.

[chrisburton]

Get rid of absolute positioning and can we get a link?

[chrisburton]

Wait, your markup is not valid. I created something similar to your code that works.

EDIT: I created 2 versions. Click here

[CrownOfMars]

Chris, thanks for your response and those examples are good.

What im trying to achieve is slightly different though. I’m trying to only call the icons.png file once instead of having it in every h1/h2 style if that makes sense.

I was under the impression that doing it this way greatly reduces load times. i could be wrong so sorry about my ignorance.

[CrownOfMars]

Well, i ended up being close

As you said i had errors, i had to change the css to:

.icon { position: absolute; top: 0; left: 0; width: 50px; height: 50px; background: url(../../images/icons.png); }

.homeicon { background-position: 0 0; }

.newsicon { background-position: -50px 0; }

[chrisburton]

I’m confused by your response as the code below basically does what you’re asking. Your markup is invalid as I’m pretty sure you cannot have a div inside header tags. And the image sprite will only appear with an H1 class of home (h1.home) and an H2 class of news (h2.news)

Welcome


Latest News




/***** CSS *****/

h1.home:before,

h2.news:before {

content:"";

display: block;

float: left;

width: 50px;

height: 50px;

margin-right: 20px;

background: url("/SPRITE/URL/image.png")no-repeat;

}



h1.home:before { background-position: 0 0; }

h2.news:before { background-position: -50px 0; }

[clokey2k]

In the first (non working) mark-up the CSS was looking for a ‘.home’ or ‘.news’ as a descendant of an ‘.icon’ not the same element. ‘.icon.news’ may have worked?

[Author]

Posts