Css responsive sprites

Working with sprites in css is an excellent way to reduce http requests for images, but, when you turn your site responsive, it becomes a bit more difficult to manage with sprites.

This is a technique working with all browsers expect IE8.

    //target your sprite
    background: url(my_img.jpg) no-repeat;

    //Specify it full image
    backgound-size: 100%;

    //Position of the targeted picture
    background-position: left 0 bottom x%;
    //Zoom in or out on the position
    width: x%;

    //Scale height by playing with padding
    padding-bottom: x%;

    //Set height to 0 because of sprite size
    height: 0;

Let’s analyze more this code. To target any sprite pictures easily, we have to specify sprite size to original, “100%”. We will then target a picture position from corresponding bottom, with left 0.

Because the sprite size is set to max 100%, we have to disable height, and the only option to set height is now to play with padding-bottom, in percentage too. Your image is fully responsive for now, just play with width to zoom in or out, and that’s all, you have a fully responsive css sprite.

Css responsive sprites

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s