Is it possible to set the equivalent of a src attribute of an img tag in CSS?

Rakesh Juyal picture Rakesh Juyal · Feb 2, 2010 · Viewed 606.7k times · Source

Is it possible to set the src attribute value in CSS? At present, what I am doing is:

<img src="pathTo/myImage.jpg"/>

and I want it to be something like this

<img class="myClass"/>
.myClass {
    some-src-property: url("pathTo/myImage.jpg");

I want to do this without using the background or background-image: properties in CSS.

Answer

Pacerier picture Pacerier · Jul 14, 2012

Use content:url("image.jpg").

Full working solution (Live Demo):

<!doctype html>

<style>
.MyClass123{
	content:url("http://imgur.com/SZ8Cm.jpg");
}
</style>

<img class="MyClass123"/>

Tested and working:

  • Chrome 14.0.835.163
  • Safari 4.0.5
  • Opera 10.6

Tested and Not working:

  • FireFox 40.0.2 (observing Developer Network Tools, you can see that the URL loads, but the image is not displayed)
  • Internet Explorer 11.0.9600.17905 (URL never loads)