设置图像以填充div的背景 [英] setting an image to fill the background of a div
问题描述
我尝试将图片设置为主体DIV的背景。
I'm trying to set an image as a background for the main body DIV.
图片需要缩放以适合div，并且垂直和水平居中。
The image needs to scale to fit the div and be vertically and horizontally centred . Overflow can be hidden on all sides.
在div中，所有边都需要有一个25像素的填充，然后内部div有一个0.2不透明度的背景颜色。
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.
在那个div中，文章被发布的组件区域，所有边都有一个25像素的填充。
Within that div is the component area where the articles are published, again, with a 25px padding on all sides.
您可以看到我遇到的问题：
http://betelec.ergonomiq.net/societe/offres-d-emploi#31-01-2013-responsable-de-projet
You can see the problem I am having here: http://betelec.ergonomiq.net/societe/offres-d-emploi#31-01-2013-responsable-de-projet
在此页面上，文章是一个手风琴，当它展开时，背景图片不会缩放以填充空格，并且有空格。
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.
此外，在此网页上：
http://betelec.ergonomiq.net/societe / charte
默认文章长度长于图像高度，因此背景不会缩放以填充div，并且已创建空格。
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.
我可以更改图像，放置一个更大的图像，可以根据需要缩小以填充可用空间。但是，图片无法平铺。
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.
最后，内部div扩展超出容器div，因此内容在右侧被截断。
Finally, the inner divs extend beyond the container div and so the content is getting cut off on the right.
在我的style.less中，我有以下代码：
In my style.less I have the following code:
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;
}
}
}
}
}
}
关于填充，问题在下面的两个截图中清晰可见。
As regards the padding, the issues are clearly visible in the two screenshots below.
正如你可以看到，有25px填充重要; code>背景颜色 background：rgba（0，168，143，0.2）背景的边缘>以及 article.item-page 上的另一个25像素填充。这些由我在屏幕截图上叠加的小黄线表示。但是，相同的填充在div的右侧不起作用，并且内容正在对div。
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 background: rgba(0, 168, 143, 0.2) !important; and a further 25px padding on the article.item-page. 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.
布局应该看起来像这个模型。
The layout is supposed to look like this mockup.
推荐答案
好了，解决了问题：
我把更改为：
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;
}
}
}
}
}
}
}
这篇关于设置图像以填充div的背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
