Css 背景图像-在容器内制作全宽图像_Css_Html_Background Image_Containers

Css 背景图像-在容器内制作全宽图像

css html

Css 背景图像-在容器内制作全宽图像,css,html,background-image,containers,Css,Html,Background Image,Containers,我需要将HTML内容放入页面模板中。我已经给出的部分在一个Div容器中，定义了我必须处理的大小。模板的CSS定义了17.5%左右的边距，这意味着我有65%的边距在中间输入我的内容。这对于我需要包含的大部分内容来说都是可以的，除了需要全宽（100%）的背景图像。我可以在内容中附加样式表，但是如果我更改css中的.wrapper元素，则会导致页面的其余部分出现问题。我还必须逐页更改背景图像，因此必须将图像路径包含在HTML中，而不是CSS中到目前为止，我得到的是 HTML: } } 有什么正确的方

我需要将HTML内容放入页面模板中。我已经给出的部分在一个Div容器中，定义了我必须处理的大小。模板的CSS定义了17.5%左右的边距，这意味着我有65%的边距在中间输入我的内容。这对于我需要包含的大部分内容来说都是可以的，除了需要全宽（100%）的背景图像。我可以在内容中附加样式表，但是如果我更改css中的.wrapper元素，则会导致页面的其余部分出现问题。我还必须逐页更改背景图像，因此必须将图像路径包含在HTML中，而不是CSS中

到目前为止，我得到的是

HTML:

}

有什么正确的方法可以使我的背景图像100%地显示在页面上，而不是容器和其他内容后面

非常感谢

在CSS中，将背景图像添加到body属性中，然后将站点的其余部分放在整个容器div中，所有其他属性都将驻留在该容器div中

HTML:

我不知道你是否有这样的权限，但你可以把img放在那个div之外，然后把它们都设置为绝对位置

<img src="asdf>
<div class="wrapper">

这完全可以使用本节中详述的相同技术

本质上，我们不使用额外的HTML，而是使用绝对定位的伪元素作为所需节/div的背景

.extra {
    position: relative;    
}

.extra::after {
    content: '';
    position: absolute;
    top:0;
    width: 100vw;
    height: 100%;
    left:50%;
    transform:translateX(-50%);
    background-image: url(http://lorempixel.com/output/abstract-q-c-1000-250-5.jpg);
    background-size: cover ;
    background-repeat: no-repeat;
}

*{
保证金：0；
填充：0；
}
.集装箱{
宽度：65%；
保证金：自动；
边框：1px纯绿色；
}
部分{
最小高度：100px；
边框：1px纯色浅灰色；
}
.额外的{
位置：相对位置；
}
额外的，额外的{
内容：''；
位置：绝对位置；
排名：0；
宽度：100vw；
身高：100%；
左：50%；
转化：translateX（-50%）；
背景图片：url(http://lorempixel.com/image_output/abstract-q-c-100-100-1.jpg);
背景尺寸：封面；
背景重复：无重复；
}

如果它是一个孩子，它将是其父母的100%。尝试将页面的父级设置为100%。问题是父级是模板css中的.wrapper，我无法真正编辑它。有没有办法“打破”父级规则？如果你不能编辑“包装器”父级，这是否意味着你只能访问你的特定div？差不多。我可以给第三方一个样式表附加，但他们不愿意让我接触他们现有的CSS。基本上，我在他们的模板中有一个区域来添加我的内容，但正如我所说的，我的区域被包装在一个Div中，类为“wrapper”，样式为17.5%左右边距，但我的背景必须是整页！（我希望这是有意义的！）将.wrapper更改为全宽+高，然后添加一个新的DIV，以旧的17.5%的边距替换原来的.wrapper DIV。.wrapper DIV可能需要使用适当的z索引进行绝对定位。新的DIV将相对定位于更高的z指数。试一试，看看它是否适合你。我需要在不同的页面上使用不同的背景，这样我就不能真正把图像路径放在CSS中。此外，我几乎只能在我有权访问的Div容器之间输入HTML，并给第三方一个样式表以附加，因此我无法真正编辑主CSS文件。@user3375160如果您没有访问主CSS文件的权限，并且需要将其作为背景图像，那么我认为您运气不好。但是，您可以像div容器是站点的

一样工作，将所有内容放在div容器内的div中（背景图像除外）。您可以使用填充或负边距。带

溢出：可见

，您的图像将比div大，但它是否将作为整个

的背景图像是另一个问题。如果不访问整个HTML/CSS，就很难知道这一点。我所说的边距实际上是指17.5%左右的填充。抱歉搞混了，大脑被炸了！如果父级使用

填充

而不是

边距

，请尝试将

div

设置为

位置：绝对。这应该忽略父容器的填充。@TylerH我认为最后一条注释就是解决方案。同时使用z-index:-1。
.pageBackground img {
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size:cover;

 <body>
   <div class="entireSite">
     Site content goes here.
   </div>
 </body>

.body {
   background-image:url("img/festival-background.jpg");
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size:cover;
}

.entireSite {
   position: absolute;
   z-index: -1;
}

<img src="asdf>
<div class="wrapper">

.wrapper {
position: absolute;
text-align: center;
width: 65%;
background-color: transparent;
height: 300px;
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -32.5%;
}

img {
position: absolute;
top: 50%;
width: 100%;
height: 50px;
background-color: gray;

}

.extra {
    position: relative;    
}

.extra::after {
    content: '';
    position: absolute;
    top:0;
    width: 100vw;
    height: 100%;
    left:50%;
    transform:translateX(-50%);
    background-image: url(http://lorempixel.com/output/abstract-q-c-1000-250-5.jpg);
    background-size: cover ;
    background-repeat: no-repeat;
}