I am facing an issue regarding the background image placement in multiple divs. When I set the position to fixed, the image repeats when I resize the screen. However, changing it to absolute causes each div to have its own image.
Is there a solution to fix this problem?
Here is the fiddle for reference:
header {
position: relative;
height: 100vh;
padding: 75px;
}
header div.container {
position: absolute;
z-index: 1;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 350px;
height: 425px;
display: flex;
overflow: hidden;
}
header div.container .context {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/*
= cols
=== */
header
.container
.col {
width: 50%;
height: 425px;
}
header
.container
.col
.image {
height: 100%;
height: 50%;
background-image: url("https://i.imgur.com/jtZfhST.png");
background-attachment: fixed;
background-position: top left;
}
header
.container
#col-left {
position: relative;
z-index: 2;
top: 12.5px;
}
header
.container
#col-left
.image1, .image3 {
margin-right: 2px;
}
header
.container
.col
.image1, .image2 {
margin-bottom: 2px;
}
header
.container
#col-right {
position: relative;
z-index: 2;
bottom: 12.5px;
}<header>
<div class="container">
<div class="col" id="col-left">
<div class="image image1"></div>
<div class="image image3"></div>
</div>
<div class="col" id="col-right">
<div class="image image2"></div>
<div class="image image4"></div>
</div>
</div>
</header>