Css Set Background-Image by Data-Image Attr

Using HTML data-attribute to set CSS background-image url

You will eventually be able to use

background-image: attr(data-image-src url);

but that is not implemented anywhere yet to my knowledge. In the above, url is an optional "type-or-unit" parameter to attr(). See https://drafts.csswg.org/css-values/#attr-notation.

How can I use a data attribute to set a background-image in CSS?

This won't be possible with pure css unless you're doing it the "undynamic" way:

.slide[data-bg="one"]{
  background-image: url('img/one.jpg');
}
.slide[data-bg="two"]{
  background-image: url('img/two.jpg');
}
...

Maybe you can dynamically create that stylesheet from your filenames on server-side.

Another (likely easier) possibility is to do this with JavaScript - but since you excluded that I assume you know about that and just don't want to use it.

CSS setting background image with data attribute

I don't think it can be done the way you want to.
What you could do is create two child div's, and toggle between them.

<div class="imageWrap">
   <div class="bigImage" style="background-image:url('someUrl');"></div>
   <div class="smallImage" style="background-image:url('someUrl');"></div>
</div>

The CSS would then look something like this:

.imageWrap .bigImage,
.imageWrap .smallImage{
    width:100%;
    height:100%;
    background-repeat:no-repeat;
    background-position:center center;
    background-size:cover;
    display:block;
}
.imageWrap .smallImage{
    display:none;
}

@media screen and (max-width:sizeInPx){
    .imageWrap .smallImage{
       display:block;
    }
    .imageWrap .largeImage{
      display:none;
    }
}

I would however prefer a javascript solution, since that wouldn't require me to preload / buffer two images.

Attribute in Background Image url

To get the background-image in jQuery you can use:

var urlFull = $('.small').css('background-image');//You will get the full value hereurl = urlFull.split('"');//But for using it properly you have to split it and get the url with `"` which will be holding the url.
console.log(url[1]); //You will get URL here

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="small" style="background-image: url('http://thecodeplayer.com/uploads/media/iphone.jpg')"></div>

var bg_img = jQuery('.wp-show-posts-inner').attr('data-src');jQuery('.wp-show-posts-inner').on('mouseover',function() {          jQuery('.home-banner .bg').css({'background-image': "url('"+bg_img+"')"});});jQuery('.wp-show-posts-inner').on('mouseleave',function() {          jQuery('.home-banner .bg').css({'background-image': "url()"});});

.bg{height:100px;width:100px;}.wp-show-posts-inner{height:100px;width:100px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="home-banner"><div class="bg">
</div></div><div class="wp-show-posts-inner" data-src="http://maria138.coroleu.com/wp-content/uploads/2018/09/foto1.jpg">wp-show-posts-inner (Hover on me)</div>