Background image not filling the entire body when scrolling-CodePudding

I created a basic example to illustrate the problem: https://codepen.io/itsechi/pen/wvmQEJb.

HTML:

<body>
  <header>
   <h1>RANDOM TEXT</h1>
   <h1>MORE RANDOM TEXT</h1>
  <header>
    <main >
      <section >
        <h2>CONTACT US</h2>
        <p>Random text here Random text here Random text here</p>
                <p>Random text here Random text here Random text here</p>
      </section>
      <img src="https://i.imgur.com/g6xj3zE.jpg">
    </main>
</body>

CSS:

html {
  box-sizing: border-box;
  font-size: 100%;
}

*,
*::before,
*::after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
  font-family: "League Spartan", sans-serif;
  font-weight: 700;
  color: #fff;
  text-align: center;
  background-color: #1B191A;
  position: relative;
  display: flex;
  justify-content: center;
}

body::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: url("https://i.imgur.com/TJA3v8q.jpg") no-repeat center/cover;
  z-index: -1;
  opacity: 0.4;
}


.contact-main {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.contact-section {
  -moz-text-align-last: left;
  text-align-last: left;
  margin: 3rem;
  font-weight: 500;
  font-size: 1.3rem;
}

@media (max-width: 69.375em) {
  .contact-section {
    margin: 1rem;
    margin-top: 2rem;
  }
}

@media (max-width: 34.375em) {
  .contact-section {
    font-size: 0.9rem;
  }
}

@media (max-width: 21.875em) {
  .contact-section {
    font-size: 0.6rem;
    margin: 0.4rem;
  }
}

.contact-section h2 {
  font-weight: 500;
  letter-spacing: 0.15em;
  margin-bottom: 1.5rem;
}

@media (max-width: 34.375em) {
  .contact-section h2 {
    font-size: 1.2rem;
  }
}

.contact-section button {
  font-family: inherit;
  padding: 0.5rem 1rem;
  margin-top: 1.5rem;
  letter-spacing: 0.15em;
  color: #CCAB5B;
  background: none;
  border: 2px solid #CCAB5B;
  font-size: 1rem;
  cursor: pointer;
}

.contact-section button:hover {
  background-color: #CCAB5B;
  color: #000;
}

@media (max-width: 34.375em) {
  .contact-section button {
    font-size: 0.7rem;
  }
}

@media (max-width: 21.875em) {
  .contact-section button {
    font-size: 0.5rem;
    padding: 0.3rem 0.8rem;
  }
}


img {
  border-radius: 50%;
  margin-top: 3rem;
  border: 3px solid #CCAB5B;
  width: 30rem;
}

@media (max-width: 69.375em) {
  img {
    position: absolute;
    top: 80%;
    width: 20rem;
  }
}

@media (max-width: 34.375em) {
  img {
    width: 12rem;
  }
}

When I resize the page to see how it looks on smaller screens the background image only fills up the height of the viewport of body and the rest of the container is just background color. The issue is best seen if you try to check how the site looks on Nest Hub in devtools. How can I stop this from happening and make the background image either repeat or better, just fill the entire space when the page becomes scrollable? Thanks.

CodePudding user response：

There are plenty of properties you can implement and combine:

if you want to repeat an image you should look into background-repeat. Otherwise you should combine those properties:

body {
  background: url('https://via.placeholder.com/1920x1080.jpg');
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* for demo purpose only */
body {
  min-height: 500vh;
}

CodePudding user response：

I think I found out what was causing the problem - it was the absolute positioning of the img. I simply changed the display of the main element to be a grid on smaller devices and now the background is working as it should!

@media (max-width: 69.375em) {
  .contact-main {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-items: center;
  }
}
.contact-section {
  -moz-text-align-last: left;
  text-align-last: left;
  margin: 3rem;
  font-weight: 500;
  font-size: 1.3rem;
  grid-row: 1/2;
}
@media (max-width: 69.375em) {
  img {
   width: 20rem;
   grid-column: span 2;
  }
}