Search code examples
csscss-content

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

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?

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.