Currently, I am developing a website using bootstrap, HTML, and CSS. The structure of the HTML code is as follows:
wrapper for fixed footer at bottom {
content
fixed bg
content
}
The overall wrapper has relative positioning. The fixed background is defined as:
figure {
position: relative;
width: 100%;
height: 60%;
margin: 0!important;
}
.fixed-wrap {
clip: rect(0, auto, auto, 0);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#fixed {
background-image: url('img/mac.png');
position: fixed;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center center;
-webkit-transform: translateZ(0);
transform: translateZ(0);
will-change: transform;
}<figure>
<div class="fixed-wrap">
<div id="fixed">
</div>
</div>
</figure>The issue I'm facing is that the fixed background and content below are not sticking to their designated positions correctly. It seems like there might be an issue in my CSS code.
As per my current CSS code, the fixed background does not appear at all. If I change the position of the figure to absolute, then it shows up, but the contact form ends up overlapping it. I hope this explanation makes sense, please forgive me if anything seems unclear or messy in this post since this is my first time posting here.