CSS - How to control the gap between background image and container

Question

Hello all,

Is it possible that I can create a margin/padding between the background image and container that holds the image? In other words, I need to move the background image sprite_global_v3.png 20px to the right of the left border of #nav-primary.

Here the position "0 -470px" are used to pick the right picture from sprite. And I don't know how to apply a padding/margin of 20px in order to achieve what I expected.

#nav-primary {
    background:url("http://static02.linkedin.com/scds/common/u/img/sprite/sprite_global_v3.png") no-repeat scroll 0 -470px transparent;
}

<div id="nav-primary">
  <span>Hello World</span>
</div>

Based on http://www.w3schools.com/css/css_background.asp

body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
} 

If I understood correctly, the background-position is used to control the alignment of the background image. Now I need to control alignment and choose the right picture from a sprite. I don't know whether or not I can mix it together.

Thank you

Answer 1

You can specify the exact position of the background to the pixel.

If you wanted a 10-pixel gap on the left-hand side, for example:

#nav-primary {
  background:url("http://static02.linkedin.com/scds/common/u/img/sprite/sprite_global_v3.png")   no-repeat scroll transparent;
  background-position:10px 0px;
}

That being said, it looks like you already specified it to be set at (0, -470). Does that not work?

Answer 2

The background-position property allows for percentages and values, e.g. "20px 0", which I think is what you're looking for.

Answer 3

No, there is no concept of padding/margin for background images.

Options:

1) Positioning the background (as already stated). The key is that the container would have to have fixed dimensions.

2) Nest a container inside a parent container. Parent gets the padding, child gets the background image.

Given that you are trying to do this with a sprite, both are likely options since a sprite has to have a fixed sized container anyways. For option 1, you'd need to make sure your sprite images have enough white space between each other in the file.

Answer 4

No, you can't mix them together.

You can place an image at an offset from the corner:

background-image: url('img_tree.png');
background-repeat: no-repeat;
background-position: 20px 20px;

But you can't combine this with the sprite techinque. This technique uses the fact that the element is smaller than the background image to clip the image, but you can't clip the background image 20 pixels into the element.