content attribute of img elements

google-chrome css image web-standards
Maximilian Hils picture Maximilian Hils · Jun 24, 2012 · Viewed 27.2k times · Source

While inspecting the Chrome Dev tools, I noticed the following CSS fragment:

img {
    content: url(image-src.png);
}

which works perfectly in Chrome (see Screenshot below).

Chrome Dev Tools

This allows me to define the src attribute of an <img> tag via CSS. Doesn't work in Firefox. Until now I thought that is not possible to directly modify the src attribute via css and I have not found anyone talking about this. So, is this just a proprietary addition in Chrome or is Chrome implementing a W3C draft or something comparable I am not aware of?

Answer

Jukka K. Korpela picture Jukka K. Korpela · Jun 24, 2012

The content property as defined in CSS 2.1 applies to :before and :after pseudo-elements only. By CSS rules, you can specify any property for any element, but specifications have limitations on what properties “apply to” (i.e., have effect on) various elements.

The CSS3 Generated and Replaced Content Module, a Working Draft, describes the content property as applying to all elements. It has an example of replacing the content of an h1 element by an image, and surely the same could be done to an img element.

But it’s just a Working Draft. The usual resources on CSS implementation status, QuirksMode.org CSS info and Caniuse.com, do not indicate the situation; they only describe the support to content for :before and :after (which is rather universal except IE 7 and earlier.

Related questions

Removing the image border in Chrome/IE9

I am trying to get rid of the thin border that appears for every image in Chrome & IE9. I have this CSS: outline: none; border: none; Using jQuery, I also added a border=0 attribute on every image tag. But …

Read More
image moves on hover - chrome opacity issue

There seems to be an issue with my page here: http://www.lonewulf.eu When hovering over the thumbnails the image moves a bit on the right, and it only happens on Chrome. My css: .img{ -ms-filter: "progid:DXImageTransform.Microsoft.…

Read More
Remove border around sprite image in Chrome

First time using this technique, seems that regardless what attributes I try to assign the border will not go away in Chrome. Other browsers are fine. I've tried outline:none, border:0; etc, etc. Also tried adding a colored border around …

Read More