Jump to content
Sign in to follow this  
joie

How to use CSS Sprite for background ?

Recommended Posts

joie

Hi, my website is http://www.gspreschool.net Currently the footer use bird-pattern image. How can I use a CSS sprite image for my footer? Lets say I have a background-sprite.png and the bird-pattern is located at 0,0 with width:100px and height:100px Without the background sprite, currently the custom CSS for single image was like this #footcols { background: url('http://www.gspreschool.net/wp-content/themes/platformpro/images/bird-pattern.png'); border: 0 none; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; margin: 0 auto; outline: 0 none; padding: 0; width: 980px; box-shadow: 0px 0px 3px #000000; } thank you, regards, joie

Share this post


Link to post
Share on other sites
joie

Thank you catrina. I tried to add background-position: 0px; but it doesnot work if I put width:100px; height:100px; on the #footcols selector, then my footer gets screwed up; is there a way to specify the background width to use because in the background-sprite i have different background patterns of various sizes ?

Share this post


Link to post
Share on other sites
joie

Does anyone has suggestion for the custom CSS to use for my footer background sprite? thank you

Share this post


Link to post
Share on other sites
kastelic

I don't understand. Right now you have a repeating image, looking like it should. If you just want a non repeating image you can do: url('http://www.gspreschool.net/wp-content/themes/platformpro/images/bird-pattern.png''>http://www.gspreschool.net/wp-content/themes/platformpro/images/bird-pattern.png') no-repeat top left; to start it a the top left. or url('http://www.gspreschool.net/wp-content/themes/platformpro/images/bird-pattern.png''>http://www.gspreschool.net/wp-content/themes/platformpro/images/bird-pattern.png') no-repeat 10px 10px; to start it 10px from top and left. But with a repeating image, you can't specify the x and y position. What is it exactly you are trying to fix?

Share this post


Link to post
Share on other sites
joie

HI kastelic, thank you for your response, This is the background sprites i want to use http://www.gspreschool.net/wp-content/themes/platformpro/images/background-sprites.png instead of a http://www.gspreschool.net/wp-content/themes/platformpro/images/bird-pattern.png on my website I have 3 patterns to use for background in various

What would be the custom CSS for my footer like if I want to select only the bird pattern from the background-sprites.png?

Share this post


Link to post
Share on other sites
kastelic

Sprites are more for having 2 or more states of an icon, or all your icons in one big image, where the container itself is small, so that you don't see the rest of the sprite because it extends beyond the container edge. They aren't used for repeating images. You will have to have 3 seperate images.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×