FF e IE non vengono caricati img src dal CSS

Question

sto impostando lo src per un'immagine con css come questo

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

Ecco la mia immagine

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

i carichi di immagini in Google Chrome con il proprio img src (../Banners/prussia-awesomeness.gif)

in internet explorer e firefox mantiene lo src "come".

Does ie ff non supportano il caricamento di origini immagine da css?

EDIT:

aggiungendo

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

fatta funzionare nel firefox, cioè rifiuta però ancora a cooperare.

provato anche l'aggiunta di: prima (con: e: :), che ha fatto alcuna differenza in qualsiasi browser

Answer 1

Sembra che la proprietà dei contenuti CSS non funziona per IMG, ma altri elementi per IE & Safari. Scopri this Fiddle. Per Safari controlla 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; 
} 

Potrebbe non funzionare con IE8, se non si dispone di DOCTYPE! specificato.

Per FF è necessario utilizzare: prima o: dopo pseudo elementi per farlo funzionare. Per maggiori informazioni vai su this.

Answer 2

Secondo MDN,

La proprietà contenuti CSS viene utilizzato con il :: prima e :: dopo pseudo-elementi per generare contenuto in un elemento.

Quindi, utilizzare content con elementi pseudo come :after o :before (singola colon per compatibilità IE8). Qualcosa di simile a questo:

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

Answer 3

Prova a rimuovere le virgolette a un valore contenuto

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