設置圖像以填充div的背景

Question

我試圖設置圖像作爲主體DIV的背景。

圖片需要縮放以適合div，並且垂直和水平居中。溢出可以隱藏在各個方面。

在div中，需要在所有邊上都有25px的填充，然後內部div具有0.2不透明度的背景色。

在那個div中是文章發佈的組件區域，同樣在所有邊上都有25px的填充。

你可以看到我有問題就在這裏： http://betelec.ergonomiq.net/societe/offres-d-emploi#31-01-2013-responsable-de-projet

在這個頁面上，文章是一個手風琴和擴張時，背景圖像不能擴展，以填補空間，並有空格。

而且，在此頁： http://betelec.ergonomiq.net/societe/charte

默認文章長度比圖像高度長，所以背景又不能擴展，以填補div和有空格創建。

我可以更改圖像並放置更大的圖像，可以按比例縮小以根據需要填充可用空間。但是，圖像無法平鋪。

最後，內部divs超出了容器div，因此內容在右邊被切斷。

在我style.less我有以下代碼：

body { 
    &.menu-offres-d-emploi, 
    &.menu-liens, 
    &.menu-envoyer-votre-cv, 
    &.menu-collaborateurs, 
    &.menu-nous-contacter, 
    &.menu-charte, 
    &.menu-qui-sommes-nous, 
    &.menu-services { 
        #rt-main [class*="grid"] { 
            & > 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; 
                & > div#rt-mainbody { 
                    background: rgba(0, 168, 143, 0.2) !important; 
                    overflow: hidden; 
                    color: @white; 
                    article.item-page { 
                        padding: 25px; 
                    } 
                } 
            } 
        } 
    } 
} 

至於填料，問題在下面的兩個截圖清晰可見。

正如你可以看到，有一個從背景（其中它符合綠色除外）的邊緣25像素填充到具有的background: rgba(0, 168, 143, 0.2) !important;背景顏色和另外的25像素填充在article.item-內格頁面。這些由我在截圖中覆蓋的小黃線表示。但是，相同的填充不適用於div的右側，並且內容與div對齊。

佈局應該是這個樣子樣機。

Answer 1

好了，解決了這個問題：

我改變了少：

body { 
    &.menu-offres-d-emploi, 
    &.menu-liens, 
    &.menu-envoyer-votre-cv, 
    &.menu-collaborateurs, 
    &.menu-nous-contacter, 
    &.menu-charte, 
    &.menu-qui-sommes-nous, 
    &.menu-services { 
     div#rt-main { // removed " [class*="grid"] " 
      & > div.rt-container [class*="rt-grid"] { //added this new selector level with the portion of code removed from previous line 
       & > 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: auto; 
        overflow: hidden; 
        margin: 0; 
        padding: 25px !important; 
        // padding-bottom: 0; 
        // margin-bottom: 0; 
        & > div#rt-mainbody { 
         background: rgba(0, 168, 143, 0.2) !important; 
         overflow: hidden; 
         color: @white; 
         article.item-page { 
          padding: 25px; 
         } 
        } 
       } 
      } 
     } 
    } 
}