Title: CSS Sprites
Last modified: August 19, 2016

---

# CSS Sprites

 *  [Rishi](https://wordpress.org/support/users/rishk789/)
 * (@rishk789)
 * [17 years, 10 months ago](https://wordpress.org/support/topic/css-sprites/)
 * Hey everyone, first of all, my website is: [http://www.rishi-kumar.com](http://www.rishi-kumar.com)
 * It has around 25 HTML requests per load (without Super-Cache), and about 22 of
   them are for images called for by the style.css. I’ve created a sprite with all
   the images and the website I used ([http://spritegen.website-performance.org](http://spritegen.website-performance.org))
   also gave me some “rules.” I’m not very familiar with CSS, so I was wondering
   if someone could aid me in making the proper substitutions.
 * For example, here’s a clip of some of my current style.css calling images:
 *     ```
       #searchform #s{
       	background: #ffffff url(images/form-field-bg.gif) no-repeat ;
       	height: 17px;
       	width: 148px;
       	margin: 6px 5px 0px 10px;
       	padding: 3px 7px 2px 5px;
       	color: #999999;
       	border: none;
       }
       #searchform #searchsubmit {
       	background: url(images/search-btn.png) no-repeat left top;
       	height: 24px;
       	width: 24px;
       	border: none;
       	text-indent: -999%;
       	line-height: 1px;
       	margin-top: 6px;
       }
       ```
   
 * After generating my sprite using the aforementioned website, I received a list
   of “rules.” Among these were the following, which I think match up with the two
   CSS terms from earlier:
 *     ```
       .form-field-bg { background-position: -2348px -1364px; }
       .search-btn { background-position: 0 -1166px; }
       ```
   
 * Also, the website told me not to forget to add a background rule reference to
   the sprite image like this:
 *     ```
       #container li {
          background: url(csg-4878343169917.png) no-repeat top left;
       }
       ```
   
 * All is where do I insert the reference to the sprite image… and how do I tell
   my style.css to use the parts of the sprite image rather than calling the images
   individually? Thank you!

Viewing 1 replies (of 1 total)

 *  [jbert](https://wordpress.org/support/users/jbert/)
 * (@jbert)
 * [17 years, 2 months ago](https://wordpress.org/support/topic/css-sprites/#post-806427)
 * I am so glad I came across your post. I am stuck exactly where your post talks
   about. As usual, I see no post or replies. From what you posted, it looks like
   though, you are still using your original images in the URL line. I think these
   should be the sprite image you created on the generator page. Where I am stuck
   is how to incorporate the positions of each image in wordpress.
 * Have you made any headway with this
 * Jim
 * [wpobsessions@gmail.com](https://wordpress.org/support/topic/css-sprites/wpobsessions@gmail.com?output_format=md)

Viewing 1 replies (of 1 total)

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

## Tags

 * [css](https://wordpress.org/support/topic-tag/css/)

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 1 reply
 * 2 participants
 * Last reply from: [jbert](https://wordpress.org/support/users/jbert/)
 * Last activity: [17 years, 2 months ago](https://wordpress.org/support/topic/css-sprites/#post-806427)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics