Question

Hello everyone!

I have a website which is http://www.urbanelementz.ca … It’s currently in development.

Please note that I’m quite familiar with CSS sprites and can make mouse-over/rollover sprites as well as static image sprites. I use about 7 or 8 major sprites on my website that control most of the images and multiple mouse-overs (such as the menu, etc).

My question: I have about 8-10 DIV’s that use background images. As of now, each div has it’s own background-image. Either I’m missing something very simple or I’m just stumped because I can’t seem to code it properly to work.

My problem: I know how to make the sprite, I know how to link to the sprite but when you use the “background-position: 0px 0px” option it will move the background image position in the DIV and not the background position on the image to show the proper sprite.

You can view my CSS file here: http://www.urbanelementz.ca/css/style.css
Note that it’s not fully organized or optimized at the moment because I’m making changes.

Please take a look at the css sprites which are all located towards the bottom and have comments so you can see which ones they are.

Am I missing something obvious? Maybe I’m sleep deprived. =0)

If someone can point me to a tutorial or just paste the proper coding and description of how to do it, that would be great.

Thanks so much!

Answer 1

As per your comment, below is the content of the fiddle I created:

<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<div id="four"></div>
<div id="five"></div>

div {
    width: 100px;
    height: 20px;
    border: 1px solid #aaa;
    margin-bottom: 5px;
    background-image: url('http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG');
}
#one {
  background-position: -15px 0;
}
#two {
  background-position: -15px -27px;
}
#three {
  background-position: -15px -54px;
}
#four {
  background-position: -15px -81px;
}
#five {
  background-position: -15px -108px;
}

http://jsfiddle.net/TFwdB/