"Динамический" url у background-image?

Question

[IIIu6ko]

Имеется 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 просто не силён, ток разбираюсь)

Answer 1

[Сергей delphinpro]

@for $i from 1 through 6 {
  .teammate-#{$i} {
    bacground-image: url('/images/teammate-#{$i}');
  }
}

Comments

[Kovalsky]

Не успел я

[IIIu6ko]

Отлично! То, что надо. Спасибо.

@for $i from 1 through 6
    .teammate-#{$i}
        background: url('../img/teammate#{$i}.jpg') no-repeat center center
        background-size: cover
        width: 370px
        height: 440px
        padding: 184px 20px 15px 20px

        &:hover
            .teammate-info-#{$i}
                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

Answer 2

[iBird Rose]

<div class="teammate-1" style="background-image: url('...');">