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

Question

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

到目前为止我所拥有的是什么

HTML:

 <div class="pageBackground">
        <img src="img/festival-background.jpg">
    </div>  

CSS:

.pageBackground {
position: relative;

}

.pageBackground img {
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size:cover;

}

什么是正确的方法,使我的背景图像100%的页面,而不是容器和我的内容的其余部分？

提前谢谢了!!!

Answer 1

使用本Q/A中详述的相同技术完全可以实现.

基本上,不使用额外的HTML,我们使用绝对定位的伪元素作为所需section/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;
}

* {
  margin: 0;
  padding: 0;
}
.container {
  width: 65%;
  margin: auto;
  border: 1px solid green;
}
section {
  min-height: 100px;
  border: 1px solid lightgrey;
}
.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/image_output/abstract-q-c-100-100-1.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}

<div class="container">
  <section></section>
  <section class="extra"></section>
  <section></section>
</div>