Section background does not cover the entire height

Question

I'm using <section> tag as background of certain section in my website, but the height of the background is getting cut, although the content continues.

I have tried to apply positions, none of my variation of positioning succeeded.

#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>

Why does the background doesn't lays on the entire section height? and how can I make the background cover the entire height?

score 0 · Accepted Answer · answered May 09 '20 at 19:46

Floating the descendants of your section take them out of the flow of the document. Add overflow: auto; to your section to restore the behavior you're after.

#pipe {
  background-image: url('https://via.placeholder.com/1000');
  width: 100%;
  height: auto;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 50px;
  overflow: auto;
}

#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>

Section background does not cover the entire height

1 Answers1