CSS Sprites (2 posts)

  1. Rishi
    Posted 7 years ago #

    Hey 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!

  2. Jbert
    Posted 6 years ago #

    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



Topic Closed

This topic has been closed to new replies.

About this Topic