Is it possible to load a background image via attribute with CSS? [duplicate]

StackOverflow https://stackoverflow.com/questions/23591014

  •  20-07-2023
  •  | 
  •  

Question

I was wondering, if I could use CSS to load a background if the attribute gets a specific class. To demonstrate, it should load on hover.

HTML

<div id="testdiv" title="http://www.thesearchagents.com/wp-content/uploads/2013/11/Google-Search.jpg">hover me...</div>

CSS

#testdiv {
    line-height:100px;
}    
#testdiv:hover {
    outline:3px solid red;
    background:url(attr(title)) 100%; // > How can I make this work?
}

#testdiv:hover:after {
    content:attr(title); // > This works fine...
}

JS Fiddle

Unfortunately, no background image shows up on mouseover (hover).

(How) can I make this work?

Was it helpful?

Solution

In theory, yes:

background-image: attr(title url);

That url is a keyword telling the browser to interpret the title attribute as a URL value.

Unfortunately, such usage is experimental at best, and not supported in any major browser yet.

So currently, the answer is no, you cannot do that. Which is a shame.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top