title: One background image for multiple divs
body: <p>I would like to use 1 background image (1366x768) to use in several divs. But if i use :</p>
  
  <pre><code>.my_divs{
   background-image: url("image.jpg");
  }
  </code></pre>
  
  <p>I only have the top left of the image on each divs. I would like to use the portion of the image based on the div position.
  I can use transparency on the div and set the background to <code>body</code>.</p>
  
  <p>It will work, but in my case i'm already using <code>background-image</code> for <code>body</code> with another image.</p>
  
  <pre><code>body{
   background-image: url("another_image.jpg");
  }
  </code></pre>
  
  <p>Is there a way to maybe "see through" <code>body</code> and show the <code>html</code> background-image ? Or another css trick ?</p>
  
  <p><strong>EDIT</strong> : add simple example</p>
  
  <pre><code>&lt;style&gt;
  .mydivs{
      padding:30px;
      margin:30px;
      background-image: url("2.jpg");
  }
  body{
      background-image: url("1.jpg");
  }
  #container{
  }
  &lt;/style&gt;
  &lt;body&gt;
      &lt;div id='container'&gt;
          &lt;div class='mydivs'&gt;1&lt;/div&gt;
          &lt;div class='mydivs'&gt;2&lt;/div&gt;
          &lt;div class='mydivs'&gt;3&lt;/div&gt;
      &lt;/div&gt; 
  &lt;/body&gt;
  </code></pre>