title: Background Image Fluid Resizing
body: <p>I am using an background image which is inside a header tag. The coding looks like this:</p>
  
  <pre><code>&lt;div id "header"&gt;
  &lt;div id "logo"&gt;
  &lt;div id "nav"&gt;
  
  
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The header is inside a container element which is sized at width:75%. The logo image is 1024px wide and 75px height. I am trying to find a solution that would keep the logo image which is inside a background tag at 100% width of the container element and when re-sized it  is re-sized proportionally.</p>
  
  <p>The solution I have thought of is </p>
  
  <pre><code>background-size:auto;
  </code></pre>
  
  <p>I have chosen the 1024px as it would accommodate most screen. The min-width would be 780px and the max-width:1024px.</p>
  
  <p>What is the best solution to have this background image re-size in proportion the the visitor screen and the container element which it is in.</p>
  
  <p>Thanks</p>