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

Popular posts from this blog

php - Android app custom user registration and login with cookie using facebook sdk -

django - Access session in user model .save() -

php - .htaccess Multiple Rewrite Rules / Prioritizing -