have image only show in certain boxes of container

Timothy Ong 0
Viewed 30

I have a container like so: enter image description here

I have an image that is 100% width and height of the container, but I want the contents to only be visible in the blue boxes and not visible in the red boxes. How do I do so?

z-index reactjs css
1 Answers

One way of doing this with a fixed image is to have each of the boxes have a pseudo before element that is the full size of the container and with that image as background.

In this snippet the box is clipped to its own size so that background gets clipped too and you see just the part that is 'below' the box.

* {
  margin: 0;
}

.container {
  width: 100vw;
  height: 100vh;
  position: relative;
  background-color: red;
}

.container>div::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(https://picsum.photos/id/1015/1024/768);
  background-size: cover;
  z-index: -1;
}

.container>div {
  position: absolute;
  clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);
}

.box1 {
  top: 10%;
  height: 70%;
  width: 20%;
  left: 10%;
}

.box2 {
  top: 20%;
  height: 50%;
  width: 20%;
  left: 70%;
}
<div class="container">
  <div class="box1"></div>
  <div class="box2"></div>
</div>

A Haworth0
Related