content with absolute position not showing in all browsers

Question

i'm building one site with wordpress+gantry framework, with responsive layout selected, and i have in the left side of the screen one picture above background. this left picture ( some kind of vertical sidebar withouth other content) is positioned absolutely with next code:

div.imgleft{
content: url('http://coszminart.ro/wp-content/uploads/2014/02/laterala.png');  
position: absolute;
margin-left: 0px; 
margin-top: -1px; 
max-height: 1020px;
height: 100%;
max-width: 570px; 
background-size: cover;
z-index: 1000  !important;
}

the div.imgleft i inserted above header, in the template index.php THE PROBLEM: the left image is not showing in iexplore 10, 11, latest mozilla, just in chrome and android phone. If i verify with chrome/firefox inspect tools, the css code is loaded ok. I've read that absolute positioning is cross browsers compatible, why is not working, is something wrong with my code? ![enter image description here][1]

Thanks for any help, sorry for the bad English.

Answer 1

The content property is used with the :before and :after pseudo-elements, to insert generated content.

So use

 background-image : url('http://coszminart.ro/wp-content/uploads/2014/02/laterala.png'); 

instead of content

Here is working fiddle http://jsfiddle.net/krunalp1993/Az5GG/1/