Title: CSS Sprite
Last modified: August 22, 2016

---

# CSS Sprite

 *  Resolved [herschen](https://wordpress.org/support/users/herschen/)
 * (@herschen)
 * [11 years, 8 months ago](https://wordpress.org/support/topic/css-sprite-1/)
 * I am using the Travelify theme.
    I created a css sprite using the CSS sprite 
   generator at [](http://spritegen.website-performance.org/)
 * I added the following code to styles.css:
 *     ```
       #hover1 a {
           float: left;
           background: url('/wordpress/wp-content/uploads/2014/09/csg-541e190e3a14d.png') no-repeat top left;
           background-position: 0 0;
           width: 298px;
           height: 93px;
   
       }
   
       #hover1 a:hover {
           background-position: 0 -143px;
       }
   
       #hover2 a {
           float: right;
           background: url('/wordpress/wp-content/uploads/2014/09/legend.png') no-repeat top right;
           background-position: 0 0;
           width: 172px;
           height: 39px;
   
       }
   
       #hover2 a:hover {
           background-position: 0 -89px;
   
       }
   
       #hover3 a {
           float: right;
           background: url('/wordpress/wp-content/uploads/2014/09/news.png') no-repeat top right;
           background-position: 0 0;
           width: 172px;
           height: 39px;
   
       }
   
       #hover3 a:hover {
           background-position: 0 -89px;
       }
   
       #hover4 a {
           float: right;
           background: url('/wordpress/wp-content/uploads/2014/09/collodial_small.png') no-repeat top right;
           background-position: 0 0;
           width: 288px;
           height: 107px;
   
       }
   
       #hover4 a:hover {
           background-position: 0 -157px;
       }
   
       #hover5 a {
           float: right;
           background: url('/wordpress/wp-content/uploads/2014/09/greens_side_small.png') no-repeat top right;
           background-position: 0 0;
           width: 288px;
           height: 107px;
   
       }
   
       #hover5 a:hover {
           background-position: 0 -157px;
       }
   
       #hover6 a {
           float: right;
           background: url('/wordpress/wp-content/uploads/2014/09/inhalers_small.png') no-repeat top right;
           background-position: 0 0;
           width: 288px;
           height: 107px;
   
       }
   
       #hover6 a:hover {
           background-position: 0 -157px;
   
       }
   
       #hover7 a {
           float: right;
           background: url('/wordpress/wp-content/uploads/2014/09/salt_side_small.png') no-repeat top right;
           background-position: 0 0;
           width: 288px;
           height: 107px;
   
       }
   
       #hover7 a:hover {
           background-position: 0 -157px;
       }'
   
       and on the home page I added this code:
       ```
   
 * <div id=”hover1″>[](https://wordpress.org/wordpress/?p=160)</div>’
 * On the right sidebar, I added the following text:
    ‘[<img align=”right” src=”../wordpress/wp-content/uploads/2014/09/cart.jpg” alt=”View the Cart” name=”cart” width=”172″ height=”39″ border=”0″ align=”top”>](https://wordpress.org/support/topic/css-sprite-1/../wordpress/?page_id=8)
   <div id=”hover2″>[](https://wordpress.org/support/topic/css-sprite-1/../wordpress/?page_id=522)
   </div> <div id=”hover3″>[](https://wordpress.org/support/topic/css-sprite-1/../wordpress/?page_id=516)
   </div> <div id=”hover4″>[](https://wordpress.org/support/topic/css-sprite-1/../wordpress/?product=kokopellis-colloidal-silver)
   </div> <div id=”hover5″>[](https://wordpress.org/support/topic/css-sprite-1/../wordpress/?product=kokopellis-greens)
   </div> <div id=”hover6″>[](https://wordpress.org/support/topic/css-sprite-1/../wordpress/?product=254)
   </div> <div id=”hover7″>[](https://wordpress.org/support/topic/css-sprite-1/../wordpress/?product=pink-himalayan-salt)
   </div>’
 * You’ll notice on the home page [http://kokopelliswellness.com/wordpress/?page_id=436](http://kokopelliswellness.com/wordpress/?page_id=436)
   that hover6, hover7 end up out of alignment, but the image size (and location
   of each sprite) is identical. Can someone please help me get this in alignment?
   Thanks.

Viewing 1 replies (of 1 total)

 *  Thread Starter [herschen](https://wordpress.org/support/users/herschen/)
 * (@herschen)
 * [11 years, 8 months ago](https://wordpress.org/support/topic/css-sprite-1/#post-5315368)
 * I’ve fixed this. Thanks for all the help. I don’t mean that in a ‘mean’ sarcastic
   way. These forums have been real helpful, even if I was the one that figured 
   it out.

Viewing 1 replies (of 1 total)

The topic ‘CSS Sprite’ is closed to new replies.

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 1 reply
 * 1 participant
 * Last reply from: [herschen](https://wordpress.org/support/users/herschen/)
 * Last activity: [11 years, 8 months ago](https://wordpress.org/support/topic/css-sprite-1/#post-5315368)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics