title: setting an image to fill the background of a div
body: <p>I'm trying to set an image as a background for the main body DIV.</p>
  
  <p>The image needs to scale to fit the div and be vertically and horizontally centred . Overflow can be hidden on all sides.</p>
  
  <p>Within the div, there needs to be a 25px padding on all sides, then the inner div has a background colour with a 0.2 opacity.</p>
  
  <p>Within that div is the component area where the articles are published, again, with a 25px padding on all sides.</p>
  
  <p>You can see the problem I am having here:
  <a href="http://betelec.ergonomiq.net/societe/offres-d-emploi#31-01-2013-responsable-de-projet" rel="nofollow noreferrer">http://betelec.ergonomiq.net/societe/offres-d-emploi#31-01-2013-responsable-de-projet</a></p>
  
  <p>On this page, the article is an accordion and when it expands, the background image doesn't scale to fill the space and there is whitespace.</p>
  
  <p>Also, on this page:
  <a href="http://betelec.ergonomiq.net/societe/charte" rel="nofollow noreferrer">http://betelec.ergonomiq.net/societe/charte</a></p>
  
  <p>The default article length is longer than the image height, so the background again doesn't scale to fill the div and there is whitespace created.</p>
  
  <p>I can change the image and place a much larger image that can scale down to fill the available space as needed. However, the image cannot tile.</p>
  
  <p>Finally, the inner divs extend beyond the container div and so the content is getting cut off on the right.</p>
  
  <p>In my style.less I have the following code:</p>
  
  <pre><code>body {
      &amp;.menu-offres-d-emploi,
      &amp;.menu-liens,
      &amp;.menu-envoyer-votre-cv,
      &amp;.menu-collaborateurs,
      &amp;.menu-nous-contacter,
      &amp;.menu-charte,
      &amp;.menu-qui-sommes-nous,
      &amp;.menu-services {
          #rt-main [class*="grid"] {
              &amp; &gt; div.rt-block {
                  background-image: url(../images/backgrounds/blur.jpg);
                  background-size: cover;
                  position: relative;
                  background-position: center;
                  background-repeat: no-repeat;
                  height: 100%;
                  width: 100%;
                  overflow: hidden;
                  margin: 0;
                  padding: 25px !important;
                  // padding-bottom: 0;
                  // margin-bottom: 0;
                  &amp; &gt; div#rt-mainbody {
                      background: rgba(0, 168, 143, 0.2) !important;
                      overflow: hidden;
                      color: @white;
                      article.item-page {
                          padding: 25px;
                      }
                  }
              }
          }
      }
  }
  </code></pre>
  
  <p>As regards the padding, the issues are clearly visible in the two screenshots below.</p>
  
  <p>As you can see, there is 25px padding from the edge of the background (where it meets the green aside) to the inner div which has a background colour of <code>background: rgba(0, 168, 143, 0.2) !important;</code> and a further 25px padding on the <strong>article.item-page</strong>. These are indicated by the small yellow lines I have overlaid on the screenshots. However, the same padding isn't working on the right side of the div, and the content is hitting up against the div.</p>
  
  <p><img src="https://i.stack.imgur.com/xCzQj.png" alt="Padding missing on right edge of div"></p>
  
  <p><img src="https://i.stack.imgur.com/5VjTr.png" alt="Same thing here"></p>
  
  <p>The layout is supposed to look like this mockup.</p>
  
  <p><img src="https://i.stack.imgur.com/PAsUy.jpg" alt="Mockup"></p>