CSS: Change background-image property dynamically for different resolutions
<p>I am having a little trouble with an idea that I had, but would like to ask someone else if something like this is possible.</p>

<p>I want to use the css function <code>attr()</code> to get a value of a data attribute and use that value to set the background image for different resolutions using the <code>url()</code> function.</p>

<p>I'm using a cms with a templating engine so I won't know the image url until the template is compiled hence wanting to get the value from the data attribute.</p>

<p>here is some code.</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>* {
  box-sizing: border-box;  
}  

body {
  padding: 1em;  
}

.carousel__item {
  display: block;
  position: relative;
  width: 60%;
}

/* this works */
.carousel__image {
  background-image: url(//placehold.it/200/200);  
}

/* this doesn't but I would like it to */
.carousel__image {
  background-image: url(attr(data-image-mobile));
}

.carousel__image {
  background: #282C32;
  width: 100%;
  padding-top: 56.25%;
  margin: 0;
  background-repeat: none;
  background-size: cover;
  background-position: center;
  position: relative;
}

/* change the resolution when the screen size is larger than 600px */
@media screen and (min-width: 600px){
  .carousel__image {
    background-image: url(attr(data-image-full));
    padding-top: 75%;
  }
}

.carousel__link {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.carousel__link::after {
  content: attr(data-attr-test);
  position: absolute;
  top: 10%;
  left: 10%;
  background: #eee;
  padding: 1em;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="carousel__item"&gt;
  &lt;figure class="carousel__image"
    data-image-full="//placehold.it/400/200"
    data-image-mobile="//placehold.it/200/200"&gt;
    &lt;figcaption class="carousel__figcaption"&gt;a caption&lt;/figcaption&gt;
  &lt;/figure&gt;
  &lt;a class="carousel__link" 
     href="#somewhere" 
     title="somewhere"
     data-attr-test="attr works for this yo"&gt;&lt;/a&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>If this is impossible is there another way I can achieve the same thing, the other hacky solution I can think of is duplicate the figure elements showing either for the different resolutions eg. </p>

<pre><code>&lt;div class="carousel__item"&gt;
  &lt;figure class="carousel__image carousel__image--full"
    style="background-image:url(//placehold.it/600/200);"&gt;
    &lt;figcaption class="carousel__figcaption"&gt;a caption&lt;/figcaption&gt;
  &lt;/figure&gt;
  &lt;figure class="carousel__image carousel__image--mobile"
    style="background-image:url(//placehold.it/200/200);"&gt;
    &lt;figcaption class="carousel__figcaption"&gt;a caption&lt;/figcaption&gt;
  &lt;/figure&gt;
  &lt;a class="carousel__link" href="//somewhere.com" title="somewhere"&gt;&lt;/a&gt;
&lt;/div&gt;
</code></pre>

<p>but that makes me feel dirty duplicating the html just for the image.</p>

<p>I know I could do it in js as I'm a js guy, but want to see if anything is possible with just css. </p>

<p>Cheers</p>