设置图像以填充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并且创建了空白。

我可以更改图像并放置一个更大的图像，可以缩小以根据需要填充可用空间。但是，图像无法平铺。

最后，内部div延伸到容器div之外，因此内容在右侧被截断。

在我的风格中。我有以下代码：

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;
                    }
                }
            }
        }
    }
}

关于填充，问题在下面的两个屏幕截图中清晰可见。

正如你所看到的，背景边缘（它与绿色相遇）有25px填充到内部div，背景颜色为background: rgba(0, 168, 143, 0.2) !important;，另外25px填充 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;
                        }
                    }
                }
            }
        }
    }
}