"Dynamic" url for background-image?

Question

css

There are 6 such blocks on 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>

And here are the styles in 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

There are also photos of teammates in the amount of 6 pieces with the names teammate1.jpg - teammate6.jpg
Is it possible somehow, only on css, to make a dynamic (or what better to call it?) url for the background?
What if each div with class teammate-*(1-6) would have its own background?
Or how to apply all properties from background (no-repeat center center, background-size: cover) to img tag?
Or how to make the substitution of the desired url in the desired div in js? (I'm just not strong in js, I understand the current)

Answer 1

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

Answer 2

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