Currently, I am using the <section> tag as a background for a specific section on my website. However, I am facing an issue where the height of the background is being cut off, even though the content continues below it.
I have attempted various positioning methods to resolve this issue but none of them have been successful.
#pipe{
background-image: url('https://via.placeholder.com/1000');
width: 100%;
height: auto;
background-size: cover;
background-repeat: no-repeat;
padding: 50px;
}
#pipe .starter-right{
width: 60%;
height: 30em;
background-color: rgb(138, 138, 138, 0.7);
float: right;
}
#pipe .second-left{
margin: 250px 0;
width: 80%;
height: 40em;
background-color: rgb(100, 100, 100, 0.7);
float: left;
}
#pipe .third-right{
margin: 50px 50px;
width: 80%;
height: 35em;
background-color: rgb(80, 80, 80, 0.7);
float: right;
}
#pipe .four-left{
margin: 200px 50px;
width: 80%;
height: 75em;
background-color: rgb(50, 50, 50, 0.7);
float: left;
} <section id="pipe">
<div data-aos="flip-left" data-aos-duration="1000" class="starter-right">
<h1>About</h1>
</div>
<div data-aos="flip-right" data-aos-duration="1000" class="second-left">
<h1>More content</h1>
</div>
<div data-aos="flip-left" data-aos-duration="1000" class="third-right">
<h1>More content</h1>
</div>
<div data-aos="flip-right" data-aos-duration="1000" class="four-left">
<h1>More content</h1>
</div>
background ends here
</section>I would like to understand why the background is not covering the entire height of the section and how can I ensure that it does so?