Where to put code for CSS Sprites

[jarmijo]

So I get the concept around CSS sprites. I've combined all the images into one image and calculated the size of each image etc. I used this post as a reference

http://www.studiopress.com/design/css-sprites.htm

I don't know where to put the code. Here is the sample code from the article:

#social-icons .facebook {
    background: url(images/sprites.png) -292px -301px no-repeat;
    display: block;
    height: 16px;
    width: 16px;
}
 
#social-icons .facebook:hover {
    background-position-y: -317px;
}

Do I put the above code in the Functions.PHP file of the child theme?

Using the above sample code - would I replace .facebook and .facebook:hover with .twitter and .twitter:hover?

Would I still use the #social-icons name before .twitter?

How do I reference the sprite class in the page I want the images to appear on?

I know this is a lot of questions. Any help is greatly appreciated.

[emasai]

This is css code, so you put the code in the style.css file. You might want to read up more on css sprites, this article for example
http://www.w3schools.com/css/css_image_sprites.asp

---

Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.com

[jarmijo]

Lynne,
Thanks for taking the time to respond. Turns out I was doing it correctly all along but the code was conflicting with some other code. That's why I couldn't figure out what I was doing incorrectly. Two days to figure it out.

Thanks again for your help.

[Author]

Posts