Get background image from a image file by position in CSS

Question

We suppose that we have the following image (is a single file with 4 radio buttons, seems same but it is for example, the icons could be different):

I saw, a time ago, how to get an image by specifing background-position in CSS style. How to do that ?

Means, how to get the icon from lower-right side in CSS instead splitting that file in four icons separately ?

Sorry if this question is obsolete but I'm beginner in CSS.

Answer 1

Jangid's response is not quite correct.

With CSS, we can show just the part of the image we need.

This is not true; no CSS currently allows "clipping" of an area from a sprite image. All that is possible is to set the positioning as per the standard (left, top, right, bottom or offset).

You must make sure that if your graphics are going to be used as the background to a FLUID element (i.e. with an automatic height/width) that your images are spaced out well enough. If you do not space them out enough, then you may well see more than one image in the background, not just the part you want.

For example, your sprite contains 36 images, all 32px square, spaced neatly on a grid of 40px.

If the element to which you apply the background image is wider and/or taller than 40px, you will see part of other images as the background, which is obviously not satisfactory.

Hope this helps.

Answer 2

So you are using Image Sprites.

With CSS, we can show just the part of the image we need.

#navlist{position:relative;}
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#navlist li, #navlist a{height:44px;display:block;}

#home{left:0px;width:46px;}
#home{background:url('img_navsprites.gif') 0 0;}

#prev{left:63px;width:43px;}
#prev{background:url('img_navsprites.gif') -47px 0;}

#next{left:129px;width:43px;}
#next{background:url('img_navsprites.gif') -91px 0;}

Answer 3

you can adjust the sprite images in css through background-position in top,left, bottom,right.

In css background position:-

background-position:top,left refers with positive values like:-if need sprite image from top,left so you can give positive values to adjust the image like:-

 background-position: 5, 10; // top left

so this mentioned above position will adjust the top & left background position.

And if you need bottom right background position so you can use the method

    background-position: 0, -50px; // bottom left
    background-position: -50px, -50px; // bottom right

so this mentioned above position will adjust the bottom & right background position.

Answer 4

Let's say your image is 100px by 100px and each button takes up 50px by 50px (including some possible whitespace).

Positioning for background images starts in the upper left-hand corner. So 0, 0.

Your CSS might look something like this:

background-image: url( ../images/button-sprite.png);
background-position: 0, 0; // top left
background-position: -50px, 0; // top right
background-position: 0, -50px; // bottom left
background-position: -50px, -50px; // bottom right

Not that the above shouldn't be used all together. You would use a separate background-position for each button.

Sometimes the positioning can seem counter intuitive since you'll usually be using negative values to get to the part of the image you need.

I tend to remind myself that if I were to add padding to an element it would push it down. Basically the same goes for background positioning. If we used 50px (positive) we would be "pushing the image down" instead of pulling it up to where we need it. Make sense?

Answer 5

Have a look at the background-position attribute.

MDN has an article about it, including examples.

There are also a number of articles available about image-sprites with CSS.