Menu
I've observed that often the websites use only one background image which contains multiple images on it. For example, instead of using separately icons, all of the icons are put on one image and then the different parts of image are used in different section.
For example, for the following Stack Overflow sprite, how would I display just one of the images?
779
CSS allows you to add multiple background images for an element, through the background-image property. The different background images are separated by commas, and the images are stacked on top of each other, where the first image is closest to the viewer.
You can apply multiple backgrounds to elements. These are layered atop one another with the first background you provide on top and the last background listed in the back. Only the last background can include a background color.
CSS3 allows you to use several background images for an element.
What will happen if we use CSS to set both a background image and a background color for the same element? The background image will show with a border around it in the background color. The background image and the background color will be blended and both will show.
The technique is called CSS Sprites. Basically you use CSS's background-position property and fixed height or width for your element.
If your elemnts are fixed width and fixed height at the same time you can freely create a more compact image. See this site for more complex examples.
99
You are talking about CSS sprites, in which the background position changes on hover. Learn more here:
http://css-tricks.com/css-sprites/
35
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
