CSS固定背景附件+固定背景尺寸宽度

Question

我正在尝试将图像的 "strip" 添加到 div 的左上角作为具有固定附件属性的背景。这里是： https://jsfiddle.net/mvfariajr/recLr6yf/

HTML:

<div id="wrapper">
  <div id="container">
    <h1>TESTING</h1>
  </div>
</div>

CSS:

#wrapper {
  width: 100%;
  height: 500px;
  background-color: #ccc;
}

#container {
  text-align: center;
  margin: 0 auto;
  width: 80%;
  height: 400px;
  background-color: #fff;
  background-position: left top;
  background-repeat: no-repeat;
  background-size: 70px 100%;
  background-attachment: fixed;
  background-image: url(http://ariseartgroup.com/interiors/wp-content/uploads/2017/01/metal-texture-trim.jpg);
}

问题是背景并不总是在 div 的左侧。

有什么帮助吗？谢谢！

Answer 1

给你：

#wrapper {
  width: 100%;
  height: 500px;
  background-color: #ccc;
}

#container {
  text-align: center;
  margin: 0 auto;
  width: 80%;
  height: 400px;
  background:white url("http://ariseartgroup.com/interiors/wp-content/uploads/2017/01/metal-texture-trim.jpg") 10% 50% no-repeat;
  background-size: 70px 100%;
  background-attachment: fixed;
}

<div id="wrapper">
  <div id="container">
    <h1>TESTING</h1>
  </div>
</div>

CSS固定背景附件+固定背景尺寸宽度

CSS background attachment fixed + fixed background size width

html

css

css-position

background-image