完整背景图像在背景颜色后面的y轴上重复

Question

我希望有一个全宽背景图片，背景为黄色，背景为黄色，我想要显示具有某些形状的背景图像。我想在y轴上重复背景图像，以显示整个宽度重复的形状。例如，当最后一个形状出现时，我在图像中有5个形状我想再次显示5个形状的另一组。你知道怎么做吗？

我这样做却没有成功：

https://jsfiddle.net/0r8c849u/2/

HTML：

<section class="container content-searchh">
  <div class="div">
    <h1>Title</h1>

  </div>
  <section>

的CSS：

.content-searchh{
    height: 100%;
    width: 100%;
    position: relative;
    background-image: url(https://image.ibb.co/dhdBcv/img2.png);
    background-color:yellow;
    min-height:360px;
    background-repeat:repeat-y;
    background-size:contain;

  }

我想要的效果是这样的，我有一个黄色背景，有一些不透明度，所以带有这些形状的背景图像显示但有点透明。而且我想在图像完成后重复形状的另一组形状出现。

Answer 1

请看snipet。

＆＃13;

＆＃13;

.content-search {
  height: 100%;
  width: 100%;
  position: relative;
  background: rgba(255, 255, 0, .54);
  min-height: 360px;
}

.content-search:after {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: url(https://image.ibb.co/dhdBcv/img2.png) 0 0 / auto 50%;
  opacity: .25;
}

.div {
  width: 60%;
  margin: 0 auto;
  padding: 20px 0;
}

＆＃13;

<section class="container content-search">
  <div class="div">
    <h1>Title</h1>

  </div>
  <section>

＆＃13;

＆＃13;

＆＃13;