javascript - Show parent container's background over child img -
javascript - Show parent container's background over child img -
http://jsfiddle.net/33g7e/2/
this illustration html:
<div class="container"> <ul class="menu"> <li><img src="http://i.imgur.com/xecofpd.jpg" /></li> </ul> </div>
css:
.container { background: url('http://i.imgur.com/mq0meuc.png') no-repeat left top transparent; display: block; } ul.menu { padding: 0; width: 400px; height: 300px; } ul.menu li { list-style: none; }
there's hidden background (a black bar) under img element, can see if remove img. need show on image without changing construction of html.
here css code. check demo.
ul.container li img { display:block; position:relative; z-index:-1; } .container{ background: url('http://i.imgur.com/mq0meuc.png') no-repeat left top transparent; }
html code is
<ul class="container"> <li><img src="http://i.imgur.com/xecofpd.jpg" /></li> </ul>
javascript html css
Comments
Post a Comment