Adrián Vázquez Adrián Vázquez - 5 months ago 12
HTML Question

Image with a hole through two backgrounds

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

Here's something you could try:

  1. Use a heart shape with plain CSS.
  2. 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>