How to use CSS Sprites ?

Marc0 · Aug 3, 2012

anyone know how to use CSS Sprites to make different backgrounds in a image file ?
Thanks

webdesign · Aug 3, 2012

For example you have a button with two status are normal and hover states, each state has a corresponding background. Normally you will save two files normal.gif (16x16px) and hover.gif (16x16px).
Now create a file using PS picture.gif (32x16px) then copy paste to 2 other images, the image on the left to normal, the right to hover image, like puzzle games so that.
Set CSS with code

a{
background: #FFFFFF url("picture.gif") left no-repeat;
}
a:hover{
background: #FFFFFF url("picture.gif") -16px no-repeat;
}

just simple way to make css sprites

webdesign · Aug 3, 2012

You search css sprites tutorials for more tips

Marc0 · Aug 3, 2012

Simple tip but very useful. Thanks

madelinekim · Aug 14, 2012

When you use CSS spirits you have to keep some points in mind such as CSS files are little bit heavier, Give attention when you are using repeat. For using the CSS spirits you have to put multiple files together in one file.

Marc0 · Aug 16, 2012

Thanks for all info, I've never used css sprites but now I can know abit about it

How to use CSS Sprites ?

Marc0

Well-known member

webdesign

Well-known member

webdesign

Well-known member

Marc0

Well-known member

madelinekim

Member

Marc0

Well-known member

Latest posts New threads

Latest posts

New threads

Latest Hosting Offers New Reviews

Latest hosting offers

Popular Contributors - Past 30 Days

Sponsors

Tag Cloud