Image with a hole through two backgrounds - html

Question

On the link there is an example; I have three elements, in this case, the body with the a universe background, the div, with a white background and an img where in the middle there is a hole. I want to see the first UNIVERSE background inside the heart shape and not the second/WHITE.
https://jsfiddle.net/adrianvcch/t053p4hb/
html {
background-color: black;
}
body {
margin: 50px;
background-color: white;
height: 500px;
}
.heart {
position: relative;
width: 500px;
height: 200px;
margin: 0 auto;
overflow: hidden;
}
<div class="heart">
<img src="http://s3.postimg.org/cqraf51bn/heart.png" />
</div>

Answer 1

CSS Masking
Mask # MDN
html {
background-image: url(http://scienceblogs.com/startswithabang/files/2013/02/2xcluster.jpg);
}
body {
margin: 50px;
text-align: center;
}
.heart {
position: relative;
display: inline-block;
height: 200px;
background: white;
-webkit-mask: url(http://s3.postimg.org/cqraf51bn/heart.png);
mask: url(http://s3.postimg.org/cqraf51bn/heart.png);
}
<div class="heart">
<img src="http://s3.postimg.org/cqraf51bn/heart.png" />
</div>

Answer 2

EDIT:
USING AN IMAGE:
Since the real case needs to use an image here's what can be done:
CODE SNIPPET:
body {
margin: 50px;
background-color: white;
height: 500px;
}
html,
.heart {
background-color: black;
}
.heart {
position: relative;
max-height: 200px;
margin: 0 auto;
overflow: hidden;
display: inline-block;
}
<div class="heart">
<img src="http://s3.postimg.org/cqraf51bn/heart.png" />
</div>
SOLUTION:
USING A CSS SHAPE:
Here's something you could try:
Use a heart shape with plain CSS.
Set the same background-color in your html and heart with multiple selectors separated by comma using the same css property.
CODE SNIPPET:
body {
margin: 50px;
background-color: white;
height: 500px;
}
.heart {
display: inline-block;
height: 60px;
width: 60px;
margin: 0 10px;
position: relative;
top: 0;
transform: rotate(-45deg);
}
.heart:before,
.heart:after {
content: "";
border-radius: 50%;
height: 60px;
width: 60px;
position: absolute;
}
.heart:before {
left: 0;
top: -30px;
}
.heart:after {
left: 30px;
top: 0;
}
html,
.heart,
.heart:before,
.heart:after {
background-color: black;
}
.heart-wrapper {
background-color: #c95253;
padding: 105px 80px 35px 80px;
display: inline-block;
}
<div class="heart-wrapper">
<div class="heart"></div>
</div>

Answer 3

Add this changes into your codes, But your image should be transparent to adapt the background color.
html {
background:url(https://source.unsplash.com/category/nature);
}
body {
margin: 50px;
height: 500px;
}
.heart {
position: relative;
width: 200px;
height: 200px;
margin: 0 auto;
overflow: hidden;
}
img{
width:100%;
height:200px;
}