html - How to make a transparent "hole" in the block with the background? -

html - How to make a transparent "hole" in the block with the background? -

i have div background-color , dynamic background image. need create "hole" transparency create image visible through hole.

here how transparent png , background image. first have create image cutout , save transparent png. set div background image , place image transparency within of div sits above background.

here's example:

<div id="heart"> <img src="http://s3.postimg.org/cqraf51bn/heart.png" /> </div> #heart { height:250px; width:250px; background:url('http://www.fillmurray.com/250/250'); } and jsfiddle

here's how dynamic background image:

<div id="heart"> <img class="background" src="http://www.fillmurray.com/250/250" /> <-- swap code dynamic image <img src="http://s3.postimg.org/cqraf51bn/heart.png" /> </div> #heart { height:250px; width:250px; } .background { position:absolute; z-index:-1; } updated jsfiddle

html css css3