CSS背景附件固定+固定背景大小宽度

Question

我正在尝试在 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>