设置图像以填充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对齐。
布局应该是这个样子样机。
答
好了,解决了这个问题:
我改变了少:
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;
}
}
}
}
}
}
}