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

【问题标题】：Background Images - Making a full width image within a container背景图像 - 在容器内制作全宽图像
【发布时间】：2014-03-03 14:07:15
【问题描述】：

我需要将 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% 成为页面而不是容器并位于我的其余内容后面的正确方法？

非常感谢提前！！！

【问题讨论】：

如果它是一个孩子，它将 100% 是它的父母。尝试将父页面设为 100% 的页面。
问题是模板css中的父级是.wrapper，我无法真正编辑。有没有办法“打破”父母的规矩？
如果你不能编辑 'wrapper' 父级，这是否意味着你只能访问你的特定 div？
差不多。我可以给第 3 方附上一个样式表，但他们并不热衷于让我接触他们现有的 CSS。基本上我在他们的模板中有一个区域来添加我的内容，但正如我所说，我拥有的区域被包裹在一个带有“包装器”类的 Div 中，其左右边距的样式为 17.5%，但我的背景必须是整页！（我希望这是有道理的！）
将 .wrapper 更改为全宽 + 高度，然后添加一个新的 DIV 以用旧的 17.5% 边距替换原始的 .wrapper DIV。 .wrapper DIV 可能需要使用适当的 z-index 绝对定位。新的 DIV 将以更高的 z-index 相对定位。试一试，看看它是否适合你。

标签： css html background-image containers

【解决方案1】：

使用Q/A 中详述的相同技术完全可以做到这一点。

基本上，不使用额外的 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;
}

* {
  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>

【讨论】：

【解决方案2】：

不知道您是否有这种权限，但您可以将 img 放在该 div 之外，并将它们都设置为绝对位置。

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

CSS：

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

}

jsFiddle

【讨论】：

【解决方案3】：

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

HTML：

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

CSS：

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

【讨论】：

我需要在不同的页面上使用不同的背景，所以我不能真正将图像路径放在 CSS 中。此外，我几乎只能在我有权访问的 Div 容器之间输入 HTML，并为第 3 方提供样式表以附加，因此我无法真正编辑主 CSS 文件。
@user3375160 如果您无权访问主 CSS 文件，并且需要将其作为背景图像，那么我认为您不走运。但是，您可以像您的 div 容器是站点的 <body> 一样工作，并将您的所有内容放在 div 容器内的 div 中（背景图像除外）。您可以使用填充或负边距。使用overflow: visible;，您的图像会比div 大，但它是否可以作为整个<body> 的背景图像是另一个问题。如果不访问整个 HTML/CSS，就很难知道。
还有边距，我实际上是指 17.5% 的 padding-left 和 padding-right。很抱歉有任何混乱，大脑被炸了！
如果父母使用padding 而不是margin，请尝试将您的div 设置为position: absolute;。这应该忽略父容器的填充。
@TylerH 我认为这最后一条评论是解决方案。 z-index :-1 也一样。