Question

I want to use a single image sprite for my web page, where should I declare this in CSS?
Should this be in the body or where?

Example:

body
{
   background-image:url(/img/sprites.png);
}

#someDiv
{
   background-position: -10px -20px; /* can I do this? */
}

#someOtherDiv
{
   background-position: -30px -40px; /* and this? */
}

I haven’t tried this because I want to know first if this is possible then I will construct my sprites.

Thanks

Answer 1

You just reference the same image for each selector:

a.myLink
{
   background-image:  background-image:url(/img/sprites.png);
}

a.myLink:hover
{
   /*you don't need to re-define styles for hover elements, unless you want them to change*/
   background-position: -50px 0;
}

#someOtherDiv
{
   background-image:  background-image:url(/img/sprites.png);
   background-position: -130px -40px; /* and this? */
}

There is no “global include” in CSS, just reference it in each selector. It will only be loaded once 🙂