Question

I am currently working with css sprite images for my site. But I am running into css styling issues. I have 6 categories with each having an image beside. When applying the image sprite I get repeated images of the same object.

How can I get each category with their respective image through css & sprite? If you like to look at the live examples below are the links.(ps sorry for the horrible html structure)

Thank you

How it looks:

Sprite Images: Click Here

Individual Images: Click Here

Desired Outcome:

CSS part related

<style>

    #index_categories {
        background: #fff;
        float: left;
        width: 255px;
        height: 125px;
        margin: 10px 15px 10px 40px;
        padding: 5px;
        font-size: 97%;
        vertical-align: middle;
        background: url( http://webprolearner2346.zxq.net/css-test/images/categories.png) no-repeat top left;
    }
    .index_thumb {
        padding: 5px;
    }


    .index_categories_list {
        text-indent: 5px;
        padding-left: 10px;
    }
    .index_cat {
        list-style-type: none;
    }
    #listing {
        background: #fff;
        width: 95%;
        height: 115px;
        padding: 10px;
        margin-bottom: 10px;
        margin-right: 5px;
        margin-left: 5px;
        margin-top: 5px;
    }
    .listing_pic {
        float: left;
        padding: 10px;
    }
    #whitebox {
        background: #fff;
        width: 95%;
        min-height: 200px;
        padding: 10px;
        margin-bottom: 10px;
        margin-right: 5px;
        margin-left: 5px;
        margin-top: 5px;
    }

    .sprite-books{ background-position: 0 0; width: 87px; height: 87px; } 
    .sprite-tshirt{ background-position: 0 -137px; width: 87px; height: 87px; } 
    .sprite-stereo{ background-position: 0 -274px; width: 83px; height: 83px; } 
    .sprite-chair{ background-position: 0 -407px; width: 87px; height: 87px; } 
    .sprite-key{ background-position: 0 -544px; width: 83px; height: 83px; } 
    .sprite-cake{ background-position: 0 -677px; width: 87px; height: 87px; } 
    </style>

HTML snippet

<div class="contentPost" style="height:900px;">
<div id="index_categories" class="sprite-books">
    <h3><a class="frontLinks" href="#">Category 1</a></h3>
    <ul class="index_cat">
        <li><a href="#">Books</a></li>
    </ul>
 </div>
 <div id="index_categories " class="sprite-stereo">
    <h3><a class="frontLinks" href="#">Category 2</a></h3>
    <ul class="index_cat">
          <li><a href="#">Stereo</a></li>   
    </ul>
  </div>
   <div id="index_categories" class="sprite-chair">
     <h3><a class="frontLinks" href="#">Category 3</a></h3>
     <ul class="index_cat">
        <li><a href="#">Chair</a></li>
     </ul>
    </div>
</div>

Answer 1

CSS Sprite (Google) is a big image (most probably .png) consisting out all of your required images(6 in yoyr case), in a grid-like structure. Benefit is that you will need only One HTTP request instead of NHTTP requests (where n is your number of images).

Your problem looks like the CSS Styling. But if you want to use sprites, you need one master image (sprite.png) having transparent background and having width of x*n (where X= width of your one div/category, as you shown in Desired Outcome in your question. N= number of total images, 6 here.) The height of sprite.png should be equal to the tallest of your images.

So, copy all your images stero.png, books.png into a new sprite.png as described above.

Then you could use following HTML:

<div id="wrapper">
    <div class="row">
        <div id="books" class="cell">
        </div><!--//books-->
        <div id="stereo" class="cell">
        </div><!--//stereo-->
        <div id="pen" class="cell">
        </div><!--//pen-->
    </div><!--//row-->
    <div class="row">
        <div id="mag" class="cell">
        </div><!--//mag-->
        <div id="bag" class="cell">
        </div><!--//bag-->
        <div id="paper" class="cell">
        </div><!--//paper-->
    </div><!--//row-->
</div><!--//wrapper-->

CSS:

#wrapper{
    margin: 5px auto; // to center the div on page
    width: 80%;
}
.row{ //stack'em in 3x2 grid
    clear:both;
}
.cell{
    background-color: #fefefe;
    background-url: images/sprite.png;  //Set common background UR
    float: left;                        //stack each other to left
    height: 15px;                       //desired height
    width: 30px;                        //desired width
    border: 3px solid #c3c3c3;          //set border
}

//set specific background-position for each div
//(Remember we are using same image for all these divs?
#books{ background-position: -0px -0px; }   //image starts at top:0, left:0px
#stereo{ background-position: -0px -30px; } //image starts at top:0, left:30px
#pen{ background-position: -0px -60px; }    //image starts at top:0, left:60px
#mag{ background-position: -0px -90px; }
#bag{ background-position: -0px -120px; }
#paper{ background-position: -0px -150px; }

You could also use your existing 6 images to achieve your desired result. Just set a required height,width of the div. Set background-position:top-left;. If the image is smaller that the div’s dimensions, the image will be placed in top-left corner.

EDIT:

Ok, saw your live-page’s code. You already are using a sprite file.

From seeing your How It looks & Desired pages, looks like you want to add that extra white-space around the right-bottom side of image. Right?? If yes, you could add the required white-space in the categories.png and use background-position:top-left; in CSS. It will prevent the image to repeat in the horizontal side.