css - content with absolute position not showing in all browsers -


i'm building 1 site wordpress+gantry framework, responsive layout selected, , have in left side of screen 1 picture above background. left picture ( kind of vertical sidebar withouth other content) positioned absolutely 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 inserted above header, in template index.php problem: left image not showing in iexplore 10, 11, latest mozilla, in chrome , android phone. if verify chrome/firefox inspect tools, css code loaded ok. i've read absolute positioning cross browsers compatible, why not working, wrong code? ![enter image description here][1]

thanks help, sorry bad english.

the content property used :before , :after pseudo-elements, insert generated content.

so use

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

instead of content

here working fiddle http://jsfiddle.net/krunalp1993/az5gg/1/


Comments

Popular posts from this blog

python - Subclassed QStyledItemDelegate ignores Stylesheet -

java - HttpClient 3.1 Connection pooling vs HttpClient 4.3.2 -

SQL: Divide the sum of values in one table with the count of rows in another -