背景图像固定到容器边缘

Question

是否可以将身体背景图像与容器元素的边缘对齐？

使用boostrap 3，我想要固定到容器边缘的页面的背景，因此在调整大小时，背景随容器移动（即，在下面的示例中，背景图像位于容器边缘的中心）：

body bg example http://nfx.nz/tmp/SG-BG2.png

这可能是背景图片，还是我必须添加一个新的绝对定位图层/或javascript ...？

Answer 1

您的问题有几种解决方案，这实际上取决于您是否需要动态调整背景大小。我展示的示例将动态地为容器设置动画，以便您可以看到它是如何工作的。

方法1：偏移具有已知值的背景位置

一个是如果你知道图像的确切尺寸，那么你可以简单地沿着x轴（即向左移动）将图像的宽度减去一半。这假设您没有动态调整背景图像的大小：

* {
  margin: 0;
  padding: 0;
}
div {
  background-color: steelblue;
  background-image: url('http://placehold.it/400x200');
  background-repeat: no-repeat;
  background-position: -200px 0;
  width: 50%;
  margin: 0 auto;
  height: 500px;
  animation-name: pulse;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}
@keyframes pulse {
  0% {
    width: 50%;
  }
  50% {
    width: 100%;
  }
  100% {
    width: 50%;
  }
}

<div>
Background image dimension: 400x200
</div>

方法2：使用伪/虚拟元素

如果您的背景大小是动态的（即随容器大小而变化），最好使用绝对定位的伪元素或虚拟元素：

* {
  margin: 0;
  padding: 0;
}
div {
  background-color: steelblue;
  width: 50%;
  margin: 0 auto;
  height: 500px;
  animation-name: pulse;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  position: relative;
  overflow: hidden;
}
div::before {
  background-image: url('http://placehold.it/400x200');
  background-repeat: no-repeat;
  background-size: 100%;
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -50%;
  right: 50%;
}
div > * {
  position: relative;
  }
@keyframes pulse {
  0% {
    width: 50%;
  }
  50% {
    width: 100%;
  }
  100% {
    width: 50%;
  }
}

<div>
  <p>Background image dimension: 400x200</p>
</div>