title: CSS - How to control the gap between background image and container
body: <p>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.</p>
  
  <p>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.</p>
  
  <pre><code>#nav-primary {
      background:url("http://static02.linkedin.com/scds/common/u/img/sprite/sprite_global_v3.png") no-repeat scroll 0 -470px transparent;
  }
  
  &lt;div id="nav-primary"&gt;
    &lt;span&gt;Hello World&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Based on <a href="http://www.w3schools.com/css/css_background.asp" rel="nofollow noreferrer">http://www.w3schools.com/css/css_background.asp</a></p>
  
  <pre><code>body
  {
  background-image:url('img_tree.png');
  background-repeat:no-repeat;
  background-position:right top;
  } 
  </code></pre>
  
  <p>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.</p>
  
  <p>Thank you</p>