设置图像以填充div的背景

我试图设置图像作为主体DIV的背景。设置图像以填充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对齐。

Padding missing on right edge of div

Same thing here

布局应该是这个样子样机。

Mockup

来源

2013-03-06 Ali Samii

好了，解决了这个问题：

我改变了少：

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

来源

2013-03-06 20:50:37

设置图像以填充div的背景

回答

相关问题