CODEWITHSUNDEEP
htmlcss
TheMah
TheMah

Reputation: 459

div partial background image transparency, inherits body background image

I have a simple HTML form with a submit button within. The body has a background image: enter image description here

I want to show another div with the image inherited from body like this: enter image description here

The second div has absolute position and as you see, an inherited background image (or transparent color) from body:

enter image description here

How can I manage to this? Thanks

Upvotes: 0

Views: 46

Answers (1)

Temani Afif
Temani Afif

Reputation: 272946

use background-attachment:fixed and apply the same background to the arrow and the body:

.box {
  width:40%;
  height:100vh;
  margin-left:auto;
  border:2px solid;
  box-sizing:border-box;
  background:#fff;
}

body {
  margin:0;
  background:url(https://picsum.photos/id/1016/800/800) center/cover fixed;
}

.arrow {
  position:absolute;
  height:50vh;
  right:30%;
  top:calc(50% - 25vh);
  border-radius:17%;
  background:url(https://picsum.photos/id/1016/800/800) center/cover fixed;
}
<div class="box">

</div>

<img src="https://i.sstatic.net/Yr00Q.png" class="arrow">

Upvotes: 1

Related Questions