0

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.

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

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.

here is some 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;
}
<div class="carousel__item">
  <figure class="carousel__image"
    data-image-full="//placehold.it/400/200"
    data-image-mobile="//placehold.it/200/200">
    <figcaption class="carousel__figcaption">a caption</figcaption>
  </figure>
  <a class="carousel__link" 
     href="#somewhere" 
     title="somewhere"
     data-attr-test="attr works for this yo"></a>
</div>

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. 

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

but that makes me feel dirty duplicating the html just for the image.

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.

Cheers

synthet1c
  • 6,152
  • 2
  • 24
  • 39
  • 1
    Using only CSS to accomplish this is not yet possible, see this post: http://stackoverflow.com/questions/15734546/using-html-data-attribute-to-set-css-background-image-url The best way would be to use srcset and a polyfill like https://scottjehl.github.io/picturefill/#examples – Chris May 04 '16 at 11:07
  • awesome thanks for your answer. it's cool that it's already on the table for future implementations. Will have to keep my eye on it. – synthet1c May 04 '16 at 11:16

0 Answers0