rishk789Hey everyone, first of all, my website is: 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) 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!
Jbert