Issue with keeping a background image 100% of the body height

Question

I want to create a website with a background image and I have 3 requirements for it:

Keeping the footer at the bottom of the page (easy)
A background image that covers up 100% of the body height
Some maximum page width, let's say 12800px

Sadly, I'm having issues with satisfying both 2. and 3. at the same time, but before I go more in depth about the problems, let me show the code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="css/HELP-style.css">
</head>
<body>
    <header><h1>HEADER</h1></header>

    <main>
        <!-- insert 1000 more lorem -->
        <h3>Lorem ipsum</h3>
    </main>

    <footer><h1>FOOTER</h1></footer>
</body>
</html>

And the CSS:

html {
    height: 100%;            /* 1st req */
}

body {
    min-height: 100%;        /* 1st req */
    display: flex;
    flex-direction: column;
    margin: 0 auto;          

    max-width: 1280px;       /* 3rd req */

    background-image: url("../images/myimg.jpg");  /* 2nd req */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    border: 2px solid red;
}

main {
    border: 2px solid blue;
}

footer {
    margin-top: auto;        /* 1st req */

    border: 2px solid green;
}

As you can see, the background-size is set to cover, which almost works, until there's A LOT more content (or when you zoom in close enough), aka when you need a scrollbar to go up and down the page. When that happens the background image cuts-off after 100vh units. Even though it's set to cover.

What's even stranger, is that when I set background-size: 50px 100% Then that also doesn't work. Even though I explicitly state that I want the background image to take up 100% of the body, it only takes up 100vh, which confused me even more.

What's happening here? How can I actually achieve all 3 of my goals?

If you're okay with the background image staying in place as you scroll, [this](https://stackoverflow.com/a/19364033) answers your question. — grimsteel, Mar 17 '23 at 19:27
If there's no way to figure this out, I'll go with the fixed version. — Imaginary, Mar 17 '23 at 19:38

score 0 · Accepted Answer · answered Mar 17 '23 at 19:52

A couple of things happening here, Mostly just formatting your HTML Here is it working on Codepen

html {
    height: 100%;            /* 1st req */
    width: 100%;

body {
    min-height: 100%;        /* 1st req */
    display: flex;
    height:100%;
    flex-direction: column;
    margin: 0 auto;          
    width: 100%;
    max-width: 1280px;       /* 3rd req */
    border: 2px solid red;
}

<!-- give your text its own div, apply the background to it -->
.bodyOfText{
  width:100%;
    background-image: url("https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg");  /* 2nd req */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color:red;
}
main {
    border: 2px solid blue;
}

footer {
    margin-top: auto;        /* 1st req */

    border: 2px solid green;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/HELP-style.css">
  </head>
<!--Place all of your content for the page inside of your <body>-->
  <body>
    <header>
          <h1>HEADER</h1>
    <header>
    <main>
      <!-- insert 1000 more lorem -->
      <div class='bodyOfText'>
          <h3> 
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet risus lectus. Morbi eget semper justo. Etiam eget ex a libero mattis commodo. Sed blandit nunc eu tortor vestibulum, vel consequat elit eleifend. Nam imperdiet, augue vel suscipit bibendum, lacus sapien hendrerit neque, ac pharetra nisl nisi at sapien. Duis tincidunt velit sed arcu ullamcorper posuere. Sed semper mollis velit, nec dapibus quam ultrices ac.

                Vivamus non malesuada est. In hac habitasse platea dictumst. Donec eget fermentum mauris, vitae hendrerit nisi. Phasellus lobortis volutpat neque, a aliquet enim fringilla sed. Nam sed bibendum justo. Sed euismod aliquet risus, nec vehicula nisi ullamcorper sit amet. Sed malesuada quam nulla, sit amet rutrum sem malesuada eget. Duis vitae pulvinar massa.

                Suspendisse consectetur, turpis in rhoncus iaculis, odio turpis bibendum quam, vitae rhoncus eros orci et augue. Quisque elementum nibh quis nunc vulputate, nec eleifend massa mattis. Fusce euismod dui quis enim rutrum, eget tristique libero gravida. Curabitur ac dui id ex iaculis varius. Duis vel ullamcorper lectus. Praesent volutpat, nibh in fermentum gravida, justo turpis suscipit ante, ac rhoncus leo justo eu nunc.

                Phasellus elementum mauris eget metus euismod, ac viverra nisi rutrum. Proin malesuada urna quam, at laoreet urna aliquet eu. Sed nec urna vitae nibh finibus feugiat. Quisque vel purus id eros fermentum ultricies. Nulla facilisi. Vestibulum pulvinar magna justo, vel suscipit ex vestibulum nec. Donec venenatis commodo mi at dapibus. Fusce vel ipsum ac nibh faucibus commodo.

                Suspendisse potenti. Praesent vel justo consequat, commodo arcu sed, fringilla lorem. Morbi hendrerit eros vitae semper aliquet. Nam cursus ante sed mauris posuere, non sodales ex bibendum. Sed vel dapibus sapien. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Duis sodales justo id purus sagittis, sed dapibus sem auctor. Quisque placerat aliquam nisl.

                Integer fringilla mauris nec enim dignissim, nec elementum velit auctor. Pellentesque consectetur est vel eros accumsan, quis sollicitudin justo ultrices. Praesent sagittis mi eu scelerisque aliquam. Nulla facilisi. Fusce id nunc at arcu aliquam suscipit ut a elit. Nullam elementum, metus quis tempor congue, mi nulla imperdiet sapien, eu maximus risus eros eget justo.

                Curabitur a eros purus. Vestibulum auctor lacus quis suscipit feugiat. Nullam semper lacus ac odio maximus, vel consequat ex lobortis. Suspendisse ac eros sed neque pharetra rutrum a a quam. Donec varius elit ut elit consectetur euismod. Pellentesque habitant mor
          </h3>
      </div> 
      <footer><h1>FOOTER</h1></footer>
    </main>
  </body>
</html>

It's a bit different from what I actually wanted to achieve, but after a few minor edits it did work, thanks a lot! — Imaginary, Mar 17 '23 at 20:10

Issue with keeping a background image 100% of the body height

1 Answers1