Question

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

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.