Имеется 6 вот таких блоков на html:
<div class="teammate-1">
<div class="teammate-info-1">
<h4>AL RAYHAN <span>/ UI Designer</span></h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, blanditiis?</p>
<a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-dribbble" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-envelope-o" aria-hidden="true"></i></a>
</div>
</div>
И вот такие стили на sass:
[class*="teammate-"]
background: url("../img/teammate1.jpg") no-repeat center center
background-size: cover
width: 370px
height: 440px
padding: 184px 20px 15px 20px
&:hover
[class*="teammate-info"]
opacity: 1
[class*="teammate-info"]
opacity: 0
width: 330px
height: 240px
padding: 40px
background-color: #70f6eb
transition: all 600ms ease-in-out
i.fa
padding-right: 12px
Также имеются фото тиммейтов в количестве 6 штук с названиями teammate1.jpg - teammate6.jpg
Возможно ли как-то, только на css, сделать динамический (или как лучше это назвать?) url у background?
Что бы у каждого div'a с классом teammate-*(1-6) был свой background?
Или как применить все свойства от background (no-repeat center center, background-size: cover) к тегу img?
Или как сделать подстановку нужного урла в нужный див на js? (в js просто не силён, ток разбираюсь)