Using HTML Data-Attribute to Set CSS Background-Image Url

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.

How to use DATA ATTRIBUTE to add background image to an anchor tag with HTML and CSS

Did you try:

li a[data-value='ENGLISH']{
    ...
}
li a[data-value='FRENCH']{
    ...
}

div's data-background attribute and image not showing up

Change it like this

html,body {  margin: 0;  height: 100%;}.landing {  height: 100%;}.landing div {  width: 50%;  height: 50%;  float: left;  border: 2px solid red;  box-sizing: border-box;}.landing div:nth-child(1) {  border-right-width: 1px;  border-bottom-width: 1px;}.landing div:nth-child(2) {  border-left-width: 1px;  border-bottom-width: 1px;}.landing div:nth-child(3) {  border-top-width: 1px;  border-right-width: 1px;}.landing div:nth-child(4) {  border-top-width: 1px;  border-left-width: 1px;}

<div class="landing">  <div style="background-image: url('http://placehold.it/100');"></div>  <div style="background-image: url('http://placehold.it/100');"></div>  <div style="background-image: url('http://placehold.it/100');"></div>  <div style="background-image: url('http://placehold.it/100');"></div></div>

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>