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

FF and IE do work. open Firebug in FF and click on the 'NET' tab and see what is loading. Check it is indeed the correct path. — luke2012, Aug 13 '13 at 06:47
ie and ff does not load the src from the css. the img keeps "as" as the src. My question is why it does not load in ie and ff when it does in chrome. — KristianMedK, Aug 13 '13 at 06:50

Mr_Green · Answer 1 · 2013-08-13T07:14:50.147

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;
}

edited Aug 13 '13 at 07:14

answered Aug 13 '13 at 06:55

Mr_Green

40,727
45
159
271

Check the MDN link which I added in my post. Don't add double quotes to the url. – Mr_Green Aug 13 '13 at 07:13
removed the double qoutes with no effect – KristianMedK Aug 13 '13 at 07:14
@user744610 Are you sure doing like this will work? if yes, can you share the link from which you had referred so? – Mr_Green Aug 13 '13 at 07:23
@user744610 Hey sorry, this is working fine in this fiddle without pseudo selector. http://jsfiddle.net/venkateshwar/6W3dm/. Must be issue of wrong path. – Mr_Green Aug 13 '13 at 07:27
the idea came from this answer http://stackoverflow.com/a/11484688/744610 and worked fine, until we tried internet explorer and firefox. the :after suggestion made it work in firefox too. All that is left is to figure out why it still doesn't work in ie – KristianMedK Aug 13 '13 at 07:28
@user744610 you may need to add `#Banner:after, #Banner:before{}` – Bhojendra Rauniyar Aug 13 '13 at 07:33
http://imgur.com/Mdav0Dk,q9sL1AR,McAgn9S#0 this is what i got in the fiddle (tried all browsers) could this be a local problem with just my browser/machine? – KristianMedK Aug 13 '13 at 07:35
@user744610 what is the version of your IE? and under which mode you are running? – Mr_Green Aug 13 '13 at 07:46
@user744610 [Just saying] you can also use `background-image` instead of `content` property. – Mr_Green Aug 13 '13 at 07:49
Version 10.0.9200.16635 not sure what you mean with mode i'm running? – KristianMedK Aug 13 '13 at 07:50
@user744610 I mean is it standard mode or quirks mode? this quite happens when you don't mention `Doctype` at the beginning of the html markup. – Mr_Green Aug 13 '13 at 07:51

score 2 · Accepted Answer · answered Aug 13 '13 at 08:30

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.

score 0 · Answer 3 · answered Aug 13 '13 at 06:55

0

Try to removing the double quotes to a content value

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

answered Aug 13 '13 at 06:55

xzegga

3,051
3
25
45

FF and IE don't load img src from CSS

3 Answers3

Linked