FF and IE don't load img src from CSS

Question

I'm setting the src for an image with css like this

#Banner {
content: url(../Banners/prussia-awesomeness.gif);
width: 1000px;
}

here's my image

   <div id="Header" class="Header">
        <img id="Banner" src="as"/>
    </div>

the image loads in google chrome with the proper img src (../Banners/prussia-awesomeness.gif)

in internet explorer and firefox it keeps the src "as".

Does ie and ff not support loading image sources from css?

EDIT:

adding

#Banner:after {
content: url(../Banners/prussia-awesomeness.gif);
width: 1000px;
}

made it work in firefox, ie however still refuses to cooperate.

also tried adding :before (with : and ::), which made no difference in any browser

Answer 1

It seems that CSS content property doesn't work for IMG but other elements for IE & Safari. Check out this Fiddle. For Safari check this out.

HTML:

<div id="Header" class="Header">
        <img id="Banner1" src="as"/>
    <h1 id="Banner">test</h1>
    </div>

CSS:

#Banner:before {
content: url(http://w3c.org/2008/site/images/favicon.ico);
width: 1000px;
}
#Banner1:before {
content: url(http://w3c.org/2008/site/images/favicon.ico);
width: 1000px;
}

It may not work with IE8 if you don't have DOCTYPE! specified.

For FF you need to use :before or :after pseudo elements to make it work. For more info go through this.

Answer 2

According to MDN,

The content CSS property is used with the ::before and ::after pseudo-elements to generate content in an element.

So, use content with pseudo elements like :after or :before(single colon is for IE8 compatibility). Something like this:

#Banner:after {
    content: url(../Banners/prussia-awesomeness.gif);
    width: 1000px;
}