FF and IE don't load img src from CSS
asp.net, browser, css
Solution
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.
Problem
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