满背景图像背景图像y轴上重复

Question

我想要一个背景黄色背景黄色的全宽背景图像我想显示具有一些形状的背景图像。我想在y轴上重复背景图像以显示重复整个宽度的形状。例如，当最后一个形状出现时，图像中有5个形状，我想再次显示另外一组5个形状。你知道如何做到这一点？

Im做喜欢这一点，但没有成功：

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; 

    } 

我想要的效果是这样的，我在那里有带有一些不透明度的黄色背景，以便与该sh背景图像猿出现，但有点透明。我希望形象在图像完成后重复出现另一组形状。

Answer 1

请看snipet。

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

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

 
    </div> 
 
    <section>