title: How to make a background cover a separate div?
body: <p>I'm doing a site with side-menu. 30% of the screen is the menu and the rest is content.</p>
  
  <p>The contents of the div, I put a background image using the COVER method. I used the first example:
   <a href="https://css-tricks.com/examples/FullPageBackgroundImage/css-1.php" rel="nofollow">https://css-tricks.com/examples/FullPageBackgroundImage/css-1.php</a></p>
  
  <p>However, this method works perfectly when the image occupies the entire background. As in my example, I want the same exact occupy 70% of the width, "eats" the image corners.</p>
  
  <p>How can I fix this?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="esquerda" style="width: 30%; height: 500px"&gt;
   ....conteudo.....
  &lt;/div&gt;
  
  &lt;div id="direita" style="width: 70%; height: 500px"&gt;
     &lt;img src="fundo.jpg" class="bg"&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.bg {
      min-height: 100%;
      min-width: 1024px;
  
      width: 100%;
      height: auto;   
  
      position: fixed;
      top: 0;
      float: right;
  }
  
  
  @media screen and (max-width: 1024px){
       .bg {
          left: 50%;
          margin-left: -512px; 
       }
  }
  </code></pre>