title: How do I add a background image on my DIV tag with CSS
body: <p>I'm trying to set my DIV with a background image, but it's not working for me. The image isn't showing up at all. I can't seem to figure out what I'm doing wrong.</p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;div id="main_wrapper"&gt;
          &lt;div id="main_content"&gt;
          &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>In the above code, the DIV with the id <code>"main_wrapper"</code>, i'd like to have the image I'm using fill up 100% of the screen, and the DIV with the id <code>"main_content"</code> I'd like to have a solid color, centered with only 1200px wide. </p>
  
  <p>Here is my CSS:</p>
  
  <pre><code>#main_wrapper{
      background-image: url('img/bar_bkgnd.png');
      width: 100%;
      height: auto;
      max-width: 1920px;
  }
  
  #main_content{
      background-color: #000000;
      height: 800px;
      width: 1200px;
  }
  </code></pre>
  
  <p>If anyone can help me with this issue, that would be very helpful. Thank you for your time! </p>