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
Post a Comment