Question

here is the file : http://studioteknik.ca/stackoverflow_question/test1.html i need to see only one background image at the time, let’s say the second. It’s 400 pixel from the top, but i need it image to be crop top 400 height. HOW TO DO THAT ?

Answer 1

In general content images should not be backgrounds or sprites, they should be inline images using the IMG tag. Sprites are usually reserved for UI elements such as icons and menu elements.

<div class="sprite1"></div>

CSS:

.sprite1 { 
        height:400px;
        width:400px;
        background-image:url(http://www.studioteknik.ca/stada/wp-content/themes/stada-theme/images/banner_sprite.jpg);
        background-position:0 -400px; 
    }