To allow for the opacity of an image to be changed without affecting the parent container's opacity, I added the image as a pseudo-element.
The position of the pseudo-element is set to absolute and relative to the parent to position it inside the parent div section-1.
Why do all children of section-1 need to set their position to relative in order to be visible?
.section-1 {
position: relative;
height: 100vh;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
/* background-color: rgb(228, 223, 176); */
}
.section-1::before {
content: "";
background-image: url("https://i.stack.imgur.com/XPTjz.jpg");
background-size: cover;
position: absolute;
background-position: bottom;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
/* Add change */
opacity: 0.75;
}
[![test][1]][1]
[1]:
body {
margin: 0;
font-family: Calibri, sans-serif;
}
.section-1 {
position: relative;
height: 100vh;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
/* background-color: rgb(228, 223, 176); */
}
.section-1::before {
content: "";
background-image: url("https://i.stack.imgur.com/XPTjz.jpg");
background-size: cover;
position: absolute;
background-position: bottom;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
/* Add change */
opacity: 0.75;
}
.navigation-bar {
width: 100%;
position: relative;
display: flex;
justify-content: space-between;
}
.header-content {
/* Add margin specific */
position: relative;
}
.section-2 {
position: relative;
height: 100vh;
width: 100%;
}
/* https://i.stack.imgur.com/XPTjz.jpg */ <body>
<div class="section-1">
<div class="navigation-bar">
<nav class="header-nav">
<a href="#">1</a>
<a href="#">2</a>
<a href="#">2</a>
</nav>
</div>
<div class="header-content">
<h1>header</h1>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque,
animi? Expedita, id et. Distinctio libero vitae itaque, sit quaerat,
cupiditate tempora repudiandae minus quam provident ea, cumque
perferendis saepe laborum.
</p>
<a href="#">44</a>
</div>
<div class="curios">
<p>wewewewewew</p>
</div>
</div>
</body>