CSS: how to set div background image appear like as if would fit the whole page

Question

I want to make a div welcome have the same background image as the body but inverted(1) around the div. Like stretching the background image of the div to the whole page while displaying the background only around the dimensions of said div.

Expectation: expected div background

I tried background-size: cover in the div expecting it to cover the whole page, but it covers the whole div instead.

Code for div:

.welcome {
    background-image: url("bg.jpg");
    filter: invert(1);
    background-size: cover;
}

The body had the same background image as welcome div with the following properties:

background-repeat: no-repeat;
width: 100vw;
height: 100vh;
background-size: cover;
position: fixed;
margin: auto;

Real output: output with my current code

Answer 1

Use a backdrop-filter on the element rather than copy the background image over or use opacity on it.

.box {
  background-color: rgb(0 255 0 / 0%);
  backdrop-filter: hue-rotate(180deg);
}

body {
  background-image: url(https://images.pexels.com/photos/799964/pexels-photo-799964.jpeg?auto=compress&cs=tinysrgb&w=600);
  background-size: cover;
}

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

.container {
  background-size: cover;
  align-items: center;
  display: flex;
  justify-content: center;
  height: 100%;
  width: 100%;
}

.box {
  border-radius: 5px;
  font-family: sans-serif;
  text-align: center;
  max-width: 50%;
  max-height: 50%;
  padding: 20px 40px;
  font-weight: bold;
  color:white;
}

<div class="container">
  <div class="box">
    <p>My Text Here To be Reviewed</p>
  </div>
</div>