title: Background image centered and div elements position based on percentage relative to main bg image
body: <p>I have a CSS background image that will stay centered no matter what the browser size is. The image used does not stretch the entire width of the browser. This being the case, I need the divs I have also placed in the CSS with background images and links to maintain their position relative to the background image that stays centered no matter what the browser size is.</p>
  
  <p>I have dabbled around with.</p>
  
  <pre class="lang-css prettyprint-override"><code>position:relative;
  </code></pre>
  
  <p>but it cascades all the elements and doesn't allow specific positioning that I am looking for. Here is the code I am working with. I appreciate any insight to my newb question, and look forward to learning how this behaves better.</p>
  
  <p>When this code is viewed on different sized browsers, with a background image that does not span the entire width, the elements move around because they are set to percentage. I need them to stay where they are but remain centered with the background. I am not sure how to write this in CSS and have been struggling with it for some time. Thankyou for any guidance on this specific issue.</p>
  
  <pre class="lang-css prettyprint-override"><code>body {
      background:#000 url(bg.jpg) no-repeat center 0;
  }
  #logo {
      margin: 0px 11%;
      padding: 0;
      position:absolute;
  }
  </code></pre>