CSS - Multiple images in one and using CSS to determine a background
Question
If you don't know what I mean, check this image out:
I want to know how it works, CSS yes, but exactly how does it all work out when using a background using this image and then it is all cut all exactly what it is supposed to do - when determined as a background for this image.
Would be interesting for me to know how - so I can take my CSS level up a bit more :P
Thanks
Solution
{
height: foo;
width: foo;
overflow: hidden;
background: colour url() no-repeat 0 pixels-to-top-of-image;
}
OTHER TIPS
What you are looking for is CSS Sprites, there are heaps of tutorials and ways to achieve this. Basically what you are doing is declaring a background and using background-position
to decide what in the background is displayed.
CSS Sprites are great by the way, good job for trying to figure them out.
<div id="buttonOne">Button 1</div>
<div id="buttonTwo">Button 2</div>
#buttonOne, #buttonTwo
{
background-image: url(/images/ALL-BUTTONS-IN-ONE-IMAGE-TILED-16PX-APART.png);
background-repeat: no-repeat;
width: 16px;
height: 16px;
overflow: hidden;
}
#buttonOne
{
background-position: 0 0;
}
#buttonTwo
{
background-position: 0 -16px;
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow