Dawn Pedersen Art Institute

What Are CSS Sprites? Back in the day, sprites were the images in games that swapped one little image for another in a specific place on the screen. The term has been appropriated by web designers to describe a CSS technique that is similar and very useful.

What Are CSS Sprites? Typically when we create graphical buttons, we make two images: One for the regular state of the button. One for the hover state. The images on the right are designed to repeat-x. With CSS Sprites these two images become one image. By using the background position properties in CSS, we can choose: which part of our image will be displayed for the inactive link which part will be displayed for the hover state

What Are CSS Sprites? The advantages are: there are fewer files to keep track of there are fewer http requests made of the server the file size for one larger image is smaller than the sum of a bunch of smaller images This may not seem like a big deal for two images, but it adds up for more. Let’s take a look at an example.

CSS Sprites Exercise 1. Download and unzip Take a look at buttons.psd with three buttons. The first is for a normal state The second is for a hover state The third we will use when we are on the destination page 3. We know from our guides that each button is 260 pixels wide and 60 pixels tall.

CSS Sprites Exercise 4. Take a look at buttons.jpg” The image has been flattened and cropped down to its final size (260px by 180px).

CSS Sprites Exercise 5. Open index.html in a browser and hover over each menu item.

CSS Sprites Exercise 6. Open index.html and styles.css in Dreamweaver in Code view. 7. Locate the CSS rules for #navigation li a and #navigation li a:hover. 8. Add the background declarations as shown on the right to each of these rules: background-image background-repeat background-position

CSS Sprites Exercise A little explanation: Both rules use the same buttons.jpg image. Because we are creating buttons, we don’t want the button background image to repeat. Because the tag is set to display: block and to a specific height and width, we do not see the rest of the background image. Then the position on the hover state sets the y position to -60px. This shows the second button in the image file on hover.

CSS Sprites Exercise With just a little bit of basic math you can display whichever image you need from the larger image. Let’s continue with setting our image for the destination page, as we did previously.

CSS Sprites Exercise 9. Add the following compound CSS rule to the bottom of the CSS file (notice the background-position): #page1 #page #sidebar #navigation.page1 a, #page2 #page #sidebar #navigation.page2 a, #page3 #page #sidebar #navigation.page3 a, #page4 #page #sidebar #navigation.page4 a, #page5 #page #sidebar #navigation.page5 a { color: #900; background-image: url(buttons.jpg); background-repeat: no-repeat; cursor: default; background-position: 0px -120px; }

CSS Sprites Exercise 10. In index.html, add an id="page1" attribute to the body tag. 11. Add the following class attributes within the menu: 12. In page 2.html: Add an id="page2" attribute to the body tag Replace the navigation ul element with that from index.html

CSS Sprites Exercise 13. Test the site in a browser. 14. Click on the page 1 and page 2 buttons to see the image rotation. If you open the completed folder, you will see all the pages are made. Open index.html in a browser and try the links out.

CSS Sprites Real-Life Example This particular use of the sprite is called a navigation matrix. Not only can you use the y axis to locate particular graphics, but you can use the x axis too. Check out the navigation in Apple’s website. Notice the roll over, active (when you press the button down), and destination page states.

CSS Sprites Real-Life Example Digging into the code reveals how they did this. Here is Apple’s navigation matrix. Top row for normal state Second row for hover state Third row for active state Fourth row for when you are on that particular page Each individual button is accessed one at a time with coordinates.

CSS Sprites Real-Life Example If you go to this page to see the CSS being used, it should be recognizable: Notice the position coordinates. They are what is pulling up the individual images.

CSS Sprites Resources There is a nice little tutorial on this particular navigation trick here: how-to-use-css-sprites/ how-to-use-css-sprites/ It’s a little long winded, but cool to watch anyway.

CSS Sprites Resources Sprites are not just used for navigation, but any sort of repeating icons and graphics used on your sites. Check out this tutorial: css/sprites/ All of those little green icons are in one graphic file. css/sprites/

CSS Sprites Resources Need help generating some sprite images and CSS? Try this site: