How to Create CSS Sprites
See CSS: Tips and Tricks for similar articles.A CSS sprite is an image file that contains several graphics used on a web page. By showing different parts of the sprite in different locations, it appears that there are several different images, but they are all contained in a single file, which translates to a single download.
In this How-To, you'll learn how to create a grid of images by using a sprite.
- Start with a basic HTML document containing an HTML list with as many list items as you want. For this
How-to, I'll have 25 list items, which will allow me to create a 5x5 grid. Give each list item a unique
id
.<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>CSS Sprite</title> <style type="text/css" media="screen"> </style> </head> <body> <ol id="grid"> <li id="pic1" title="Picture 1"><a href="#1">Picture 1</a></li> <li id="pic2" title="Picture 2"><a href="#2">Picture 2</a></li> <li id="pic3" title="Picture 3"><a href="#3">Picture 3</a></li> <li id="pic4" title="Picture 4"><a href="#4">Picture 4</a></li> <li id="pic5" title="Picture 5"><a href="#5">Picture 5</a></li> <li id="pic6" title="Picture 6"><a href="#6">Picture 6</a></li> <li id="pic7" title="Picture 7"><a href="#7">Picture 7</a></li> <li id="pic8" title="Picture 8"><a href="#8">Picture 8</a></li> <li id="pic9" title="Picture 9"><a href="#9">Picture 9</a></li> <li id="pic10" title="Picture 10"><a href="#10">Picture 10</a></li> <li id="pic11" title="Picture 11"><a href="#11">Picture 11</a></li> <li id="pic12" title="Picture 12"><a href="#12">Picture 12</a></li> <li id="pic13" title="Picture 13"><a href="#13">Picture 13</a></li> <li id="pic14" title="Picture 14"><a href="#14">Picture 14</a></li> <li id="pic15" title="Picture 15"><a href="#15">Picture 15</a></li> <li id="pic16" title="Picture 16"><a href="#16">Picture 16</a></li> <li id="pic17" title="Picture 17"><a href="#17">Picture 17</a></li> <li id="pic18" title="Picture 18"><a href="#18">Picture 18</a></li> <li id="pic19" title="Picture 19"><a href="#19">Picture 19</a></li> <li id="pic20" title="Picture 20"><a href="#20">Picture 20</a></li> <li id="pic21" title="Picture 21"><a href="#21">Picture 21</a></li> <li id="pic22" title="Picture 22"><a href="#22">Picture 22</a></li> <li id="pic23" title="Picture 23"><a href="#23">Picture 23</a></li> <li id="pic24" title="Picture 24"><a href="#24">Picture 24</a></li> <li id="pic25" title="Picture 25"><a href="#25">Picture 25</a></li> </ol> </body> </html>
- Inside the
style
element, give the ordered list a width and height, position it using relative positioning, and set its background to an image.<style type="text/css" media="screen"> #grid { position: relative; width: 674px; height: 674px; background: transparent url(https://howtoimages.webucator.com/2810.png) 0px 0px no-repeat; margin: auto; } </style>
- Right click on and download the following image, placing it in a directory named images in the same directory as your html file. Notice how
this image contains two different versions of each button.
- Position all of the
li
elements using absolute positioning.#grid li { position: absolute; }
- Give each list item and each link in the grid a width and height equal to the size of the individual images in the sprite
and set
overflow
tohidden
.#grid li, #grid a { display: block; height: 83px; width: 83px; text-indent:-100px; overflow:hidden; }
- Position the top edges of each of the rows in the grid and the left edges of each column:
#pic1, #pic2, #pic3, #pic4, #pic5 { top:36px; } #pic6, #pic7, #pic8, #pic9, #pic10 { top:163px; } #pic11, #pic12, #pic13, #pic14, #pic15 { top:293px; } #pic16, #pic17, #pic18, #pic19, #pic20 { top:423px; } #pic21, #pic22, #pic23, #pic24, #pic25 { top:553px; } #pic1, #pic6, #pic11, #pic16, #pic21 { left:54px; } #pic2, #pic7, #pic12, #pic17, #pic22 { left:174px; } #pic3, #pic8, #pic13, #pic18, #pic23 { left:294px; } #pic4, #pic9, #pic14, #pic19, #pic24 { left:414px; } #pic5, #pic10, #pic15, #pic20, #pic25 { left:535px; }
- Set the background of the link when it's being hovered over to the sprite image:
#grid a:hover { background: transparent url(images/sprite.png) no-repeat; }
- Use the
background-position
property to adjust the position of the background for each list item when the the mouse is hovering over it.#pic1 a:hover { background-position: -54px -683px; } #pic2 a:hover { background-position: -174px -683px; } #pic3 a:hover { background-position: -294px -683px; } #pic4 a:hover { background-position: -414px -683px; } #pic5 a:hover { background-position: -535px -683px; } #pic6 a:hover { background-position: -54px -810px; } #pic7 a:hover { background-position: -174px -810px; } #pic8 a:hover { background-position: -294px -810px; } #pic9 a:hover { background-position: -414px -810px; } #pic10 a:hover { background-position: -535px -810px; } #pic11 a:hover { background-position: -54px -940px; } #pic12 a:hover { background-position: -174px -940px; } #pic13 a:hover { background-position: -294px -940px; } #pic14 a:hover { background-position: -414px -940px; } #pic15 a:hover { background-position: -535px -940px; } #pic16 a:hover { background-position: -54px -1070px; } #pic17 a:hover { background-position: -174px -1070px; } #pic18 a:hover { background-position: -294px -1070px; } #pic19 a:hover { background-position: -414px -1070px; } #pic20 a:hover { background-position: -535px -1070px; } #pic21 a:hover { background-position: -54px -1200px; } #pic22 a:hover { background-position: -174px -1200px; } #pic23 a:hover { background-position: -294px -1200px; } #pic24 a:hover { background-position: -414px -1200px; } #pic25 a:hover { background-position: -535px -1200px; }
- Your finished code should look like this:
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="reset-meyer.css"> <style type="text/css"> body { background-color: #fff; } #grid { position: relative; width: 674px; height: 674px; background: transparent url(Images/sprite.png) 0px 0px no-repeat; margin: auto; } #grid li { position: absolute; } #grid li, #grid a { display: block; height: 83px; width: 83px; text-indent: -100px; overflow: hidden; } #pic1, #pic2, #pic3, #pic4, #pic5 { top: 36px; } #pic6, #pic7, #pic8, #pic9, #pic10 { top: 163px; } #pic11, #pic12, #pic13, #pic14, #pic15 { top: 293px; } #pic16, #pic17, #pic18, #pic19, #pic20 { top: 423px; } #pic21, #pic22, #pic23, #pic24, #pic25 { top: 553px; } #pic1, #pic6, #pic11, #pic16, #pic21 { left: 54px; } #pic2, #pic7, #pic12, #pic17, #pic22 { left: 174px; } #pic3, #pic8, #pic13, #pic18, #pic23 { left: 294px; } #pic4, #pic9, #pic14, #pic19, #pic24 { left: 414px; } #pic5, #pic10, #pic15, #pic20, #pic25 { left: 535px; } #grid a:hover { background: transparent url(Images/sprite.png) no-repeat; } #pic1 a:hover { background-position: -54px -683px; } #pic2 a:hover { background-position: -174px -683px; } #pic3 a:hover { background-position: -294px -683px; } #pic4 a:hover { background-position: -414px -683px; } #pic5 a:hover { background-position: -535px -683px; } #pic6 a:hover { background-position: -54px -810px; } #pic7 a:hover { background-position: -174px -810px; } #pic8 a:hover { background-position: -294px -810px; } #pic9 a:hover { background-position: -414px -810px; } #pic10 a:hover { background-position: -535px -810px; } #pic11 a:hover { background-position: -54px -940px; } #pic12 a:hover { background-position: -174px -940px; } #pic13 a:hover { background-position: -294px -940px; } #pic14 a:hover { background-position: -414px -940px; } #pic15 a:hover { background-position: -535px -940px; } #pic16 a:hover { background-position: -54px -1070px; } #pic17 a:hover { background-position: -174px -1070px; } #pic18 a:hover { background-position: -294px -1070px; } #pic19 a:hover { background-position: -414px -1070px; } #pic20 a:hover { background-position: -535px -1070px; } #pic21 a:hover { background-position: -54px -1200px; } #pic22 a:hover { background-position: -174px -1200px; } #pic23 a:hover { background-position: -294px -1200px; } #pic24 a:hover { background-position: -414px -1200px; } #pic25 a:hover { background-position: -535px -1200px; } </style> <title>Sprite</title> </head> <body> <ul id="grid"> <li id="pic1" title="Picture 1"><a href="#1">Picture 1</a></li> <li id="pic2" title="Picture 2"><a href="#2">Picture 2</a></li> <li id="pic3" title="Picture 3"><a href="#3">Picture 3</a></li> <li id="pic4" title="Picture 4"><a href="#4">Picture 4</a></li> <li id="pic5" title="Picture 5"><a href="#5">Picture 5</a></li> <li id="pic6" title="Picture 6"><a href="#6">Picture 6</a></li> <li id="pic7" title="Picture 7"><a href="#7">Picture 7</a></li> <li id="pic8" title="Picture 8"><a href="#8">Picture 8</a></li> <li id="pic9" title="Picture 9"><a href="#9">Picture 9</a></li> </ul> </body> </html>
Open your web page in a browser. This code renders the following:

Related Articles
- Learn the Very Basics of CSS in One Minute
- How to Create a CSS External Style Sheet
- How to Align Text with CSS
- How to Create a Horizontal Navigation Menu with CSS
- How to Create a Fixed-Width Layout with CSS
- How to Remove Spacing Between Table Borders with CSS
- How to Set a Background Image with CSS
- How to Set Text Spacing and Placement in CSS
- How to Style a Table with CSS
- How to Create Boxes with Rounded Corners in CSS
- How to Create a Vertical Navigation Menu with CSS
- How to Use the CSS Opacity Property
- How to Use Multiple Background Images with CSS
- Absolute Positioning with CSS
- How to Use the CSS Border Shorthand Property
- How to Create CSS Button Links
- How to Create a Fluid-Width Layout with CSS
- How to Set Text and Background Color with CSS
- How to Create a CSS Embedded Style Sheet
- How to Add Inline Styles to CSS
- How to Create a Border with CSS
- How to Use the CSS Padding Shorthand Property
- How to Create a Fly-Out Menu with CSS
- How to Use CSS Media Queries in Responsive Design
- How to Adjust Margins with CSS
- How to Use the CSS Background Shorthand Property
- How to Create a Form without Tables Using CSS
- How to Modify Fonts in CSS
- How to Create a Drop-Down Menu with CSS
- How to Apply Padding with CSS
- Fixed Positioning with CSS
- How to Use CSS Transitions
- How to Use the CSS list-style Shorthand Property
- How to Change Text Style in CSS
- How to Create CSS Sprites (this article)
- How to Use CSS with Different Media Types
- How to Import Style Sheets with @import in CSS
- How to Use the CSS White-Space Property
- How to Use the CSS Z-index Property
- How to Create Drop Shadows with the box-shadow Property in CSS3