How to make the background(transparent) of box items, the background of the body with CSS?

Question

There is one box in the photo below and there are round circles inside the box. The background of the box has a wood pattern, but the background of the elements inside the box is transparent(body background).

I developed the design as in the picture with CSS, but I have no idea how to make the background of the box elements transparent.

My Codes:

body {
  background: #603813;
  background: -webkit-linear-gradient(to right, #b29f94, #603813);
  background: linear-gradient(to right, #b29f94, #603813);
}

.box {
  width: 400px;
  height: auto;
  background: url('https://images.unsplash.com/photo-1538645731800-4640c639bba7');
  background-size: cover;
  margin-left: calc(50vw - 200px);
  display: grid;
  grid-gap: 1em;
  grid-template-rows: repeat(6, auto);
  grid-template-columns: repeat(4, auto);
  padding: 10px;
  margin-top: 15%;
}

.element {
  width: 3em;
  height: 3em;
  border-radius: 50%;
  border: 2px solid #000;
}

<div class="box">
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
</div>

How to make the background(transparent) of box items, the background of the body with CSS ?

Answer 1

You can combine it with background-attachment: fixed. This achieves the desired result.

fixed: stays fixed no matter what. It's kind of like a physical window: moving around the window changes your perspective, but it doesn't change where things are outside of the window.

:root {
  --body-bg: linear-gradient(to right, #b29f94, #603813);
}

body {
  background-color: #603813;
  background-image: var(--body-bg);
  background-attachment: fixed;
}

.box {
  width: 400px;
  height: auto;
  background: lime;
  background: url('https://images.unsplash.com/photo-1538645731800-4640c639bba7');
  background-size: cover;
  margin-left: calc(50vw - 200px);
  display: grid;
  grid-gap: 1em;
  grid-template-rows: repeat(6, auto);
  grid-template-columns: repeat(4, auto);
  padding: 10px;
  margin-top: 15%;
}

.element {
  width: 3em;
  height: 3em;
  border-radius: 50%;
  border: 2px solid #000;
  background-image: var(--body-bg);
  background-attachment: fixed;
}

<div class="box">
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
</div>

Answer 2

To have a real transparency you can consider mask like below:

body {
  background: #603813;
  background: linear-gradient(to right, #b29f94, #603813);
}

.box {
  width: 400px;
  height: 400px;
  margin-left: calc(50vw - 200px);
  margin-top:15%;
  
  background: 
    /* Create the black border*/
    radial-gradient(farthest-side, black 70%,transparent 73%) 0 0/4em 4em round,
    url('https://images.unsplash.com/photo-1538645731800-4640c639bba7') center/cover;
  /* create the holes*/
  -webkit-mask:radial-gradient(farthest-side, transparent 66%,#fff 67%) 0 0/4em 4em round;
          mask:radial-gradient(farthest-side, transparent 66%,#fff 67%) 0 0/4em 4em round;
}

<div class="box">
</div>

You can also keep your elements inside if you want:

body {
  background: #603813;
  background: linear-gradient(to right, #b29f94, #603813);
}

.box {
  width: calc(8*4em);
  height: calc(4*4em);
  margin: 15% auto;
  display: flex;
  flex-wrap: wrap;
  position:relative;
  z-index:0;
}
.box:before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background: url('https://images.unsplash.com/photo-1538645731800-4640c639bba7') center/cover;
  /* create the holes*/
  -webkit-mask: radial-gradient(circle 1.5em, transparent 98%, #fff 100%) 0 0/4em 4em;
          mask: radial-gradient(circle 1.5em, transparent 98%, #fff 100%) 0 0/4em 4em;
}
.element {
  width: 3em;
  height: 3em;
  margin: 0.5em;
  border-radius: 50%;
  border: 2px solid red;
  box-sizing: border-box;
}

<div class="box">
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
</div>