How to Change the background color of div element to match with body background color?

Question

In a linear-gradient background I am creating a circle and inside that a small square. The circle is having a dodgerblue color and square should have the linear-gradient of body, but the problem is the position of linear-gradient of div element doesn't match with the body background.

I tried background:inherit With the div element, But the gradient doesn't match the body.

body {
  background: linear-gradient(45deg, yellow, green);
  background-size: 400% 400%;
}

.circle {
  height: 150px;
  width: 150px;
  border-radius: 50%;
  position: relative;
  margin: auto;
  background: dodgerblue;
}

.square {
  height: 50px;
  width: 50px;
  transform: translate(250px, -100px);
  background: inherit;
}

<body>
  <div class="circle"></div>
  <div class="square"></div>
</body>

You could do `background-attachment: fixed;`, but with that I think you need to use `left` and `top` properties to position element instead of transformations. — alx, Jun 18 '19 at 07:15
Nope it doesn't work, there is still difference between the body and div background — Yashik, Jun 18 '19 at 07:21
Apparently it works if you add `background-attachment: fixed;` to `body` instead. But you're loosing some control over gradient look (it becomes less prominent with 400% scale). (Edit: that, plus absolute positioning instead of transformation.) (Edit2: https://jsfiddle.net) — alx, Jun 18 '19 at 07:25
try this https://stackoverflow.com/questions/8286550/transparent-hollow-or-cut-out-circle — Rishabh Ryber, Jun 18 '19 at 07:29
What I want is the square to be like transparent but instead of the circle background it should have body background. — Yashik, Jun 18 '19 at 07:29

score 1 · Accepted Answer · answered Jun 18 '19 at 08:08

The problem with inheriting the background image of the body is the size difference from body and circle element. So what you actually want to achieve is a hole punch kind of layout element, which exposes a part of the body background. Here is one approach with altered HTML, where the circle is a pseudo element of the circle element. The pseudo element will actually color the circle with it's box-shadow and will leave the transparent square visible.

body {
  background: linear-gradient(45deg, yellow, green);
  background-size: 400% 400%;
}

.circle-with-square {
  height: 150px;
  width: 150px;
  border-radius: 50%;
  margin: auto;
  position: fixed;
  align-items: center;
  overflow: hidden;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
}

.circle-with-square::after
{
  content: "";
  height: 50px;
  width: 50px;
  display: block;
  box-shadow: 0 0 0 150px dodgerblue;
}

<body>
  <div class="circle-with-square"></div>
</body>

What a nice solution ! You should mention the square can be moved using x/y of the box-shadow property also — Apolo, Jun 18 '19 at 08:14
It will take a bit effort, but it should be possible. The easies way would be to add a svg of a triangle as actual element, that will cast the colored shadow. — Nico O, Jun 18 '19 at 08:46

How to Change the background color of div element to match with body background color?

1 Answers1