Pure css parallax effect producing uneven sections

Question

I am trying to produce a very simple website with four sections using the parallax effect. Each section has a background image, a title and a subtitle. Even though all four images are exactly the same height (600px), only a fraction of the third section shows before the final section appearing. The footer also doesn't show. There's some overlapping going on but I don't understand what it could be.

body{ font-family: 'Comfortaa', cursive;}

header {
  color:#fff;
  background-color:blue;
  font-size: 3em;
  height:50px;
}
footer {
    color:#fff;
    background-color:red;
    font-size: 3em;
    height:50px;
}
.bgimg-1, .bgimg-2, .bgimg-3, .bgimg-4 {
  position: relative;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  height: 600px;
}
.bgimg-1 {
  background-image: url("logo.jpg");
}

.bgimg-2 {
  background-image: url("one.jpg");
}

.bgimg-3 {
  background-image: url("two.jpg");
}

.bgimg-4 {
  background-image: url("three.jpg");
}

.caption {
  position: absolute;
  left: 0;
  top: 30%;
  width: 100%;
  text-align: center;
  color: #000;

}
.subtxtd{
    color:#000;
  text-align:center;
  font-size: 1em;
  text-shadow: 5px 5px 10px;
}
 .sectitled {
    color:#000;
  font-size: 2em;
  font-weight: 500;
  text-shadow: 5px 5px 10px;
 }
 .subtxtl{
    color:#fff;
  text-align:center;
  font-size: 1em;
  text-shadow: 5px 5px 10px;
}
 .sectitlel {
    color:#fff;
  font-size: 2em;
  font-weight: 500;
  text-shadow: 5px 5px 10px;
 }

<html>
    <meta charset="utf-8" /> 
    <head>
        <title> test </title>
        <link rel="stylesheet" type="text/css" href="style.scss">
    </head>
    <body>
        <header>
            This is the  header
        </header>
        <main>
            <div class="bgimg-1">
                <div class="caption">
                    <div class="sectitled">Blake's 7</div>
                    <div class="subtxtd">This is great sci-fi</div>
                </div>
            </div>
            <div class="bgimg-2">
                <div class="caption">
                    <div class="sectitled">The Team</div>
                    <div class="subtxtd">All but one are good guys</div>
                 </div>
            </div>
            <div class="bgimg-3">
                <div class="caption">
                    <div class="sectitlel">Avon</div>
                    <div class="subtxtl"> This one is tricky, watch out! </div>
                <div>
            </div>
            <div class="bgimg-4">
                <div class="caption">
                    <div class="sectitled">The Orac</div>
                    <div class="subtxtd">will give you the answer to everything!</div>
                </div>
            </div>
        </main>
        <footer>
            This is the footer
        </footer>
    </body>
</html>

By the way .scss files are not valid css files. You'll need to convert that to CSS before a browser can understand it. — TylerH, Nov 20 '17 at 21:14
Yes I know. I actually use compass etc. But this is the compiled version. I thought it would be easier to post the plain css in the post. — Maz, Nov 20 '17 at 21:16

score 1 · Accepted Answer · answered Nov 20 '17 at 21:16

The problem is entirely down to the fact that you have a single typo resulting in invalid markup. Your <div class="bgimg-3"> ends the .caption with a <div> instead of a </div>, which results in the parser getting confused and not calculating offsets / heights correctly.

You can ensure that you have valid markup by validating your HTML with the W3 Validation Service. You can also validate your CSS with the CSS Validator (though in this case the CSS is valid).

Correcting the <div> resolves the issue, as can be seen in the following example:

body {
  font-family: 'Comfortaa', cursive;
}

header {
  color: #fff;
  background-color: blue;
  font-size: 3em;
  height: 50px;
}

footer {
  color: #fff;
  background-color: red;
  font-size: 3em;
  height: 50px;
}

.bgimg-1,
.bgimg-2,
.bgimg-3,
.bgimg-4 {
  position: relative;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  height: 600px;
}

.bgimg-1 {
  background-image: url("http://placehold.it/101");
}

.bgimg-2 {
  background-image: url("http://placehold.it/102");
}

.bgimg-3 {
  background-image: url("http://placehold.it/103");
}

.bgimg-4 {
  background-image: url("http://placehold.it/104");
}

.caption {
  position: absolute;
  left: 0;
  top: 30%;
  width: 100%;
  text-align: center;
  color: #000;
}

.subtxtd {
  color: #000;
  text-align: center;
  font-size: 1em;
  text-shadow: 5px 5px 10px;
}

.sectitled {
  color: #000;
  font-size: 2em;
  font-weight: 500;
  text-shadow: 5px 5px 10px;
}

.subtxtl {
  color: #fff;
  text-align: center;
  font-size: 1em;
  text-shadow: 5px 5px 10px;
}

.sectitlel {
  color: #fff;
  font-size: 2em;
  font-weight: 500;
  text-shadow: 5px 5px 10px;
}

<html>
<meta charset="utf-8" />

<head>
  <title> test </title>
  <link rel="stylesheet" type="text/css" href="style.scss">
</head>

<body>

  <header>
    This is the header
  </header>

  <main>

    <div class="bgimg-1">
      <div class="caption">
        <div class="sectitled">Blake's 7</div>
        <div class="subtxtd">This is great sci-fi</div>
      </div>
    </div>


    <div class="bgimg-2">
      <div class="caption">
        <div class="sectitled">The Team</div>
        <div class="subtxtd">All but one are good guys</div>
      </div>
    </div>


    <div class="bgimg-3">
      <div class="caption">
        <div class="sectitlel">Avon</div>
        <div class="subtxtl"> This one is tricky, watch out! </div>
      </div>
    </div>


    <div class="bgimg-4">
      <div class="caption">
        <div class="sectitled">The Orac</div>
        <div class="subtxtd">will give you the answer to everything!</div>
      </div>
    </div>
  </main>

  <footer>
    This is the footer
  </footer>
</body>

</html>

Hope this helps! :)

Haha, no worries; we all make mistakes like that from time to time, and glad to help! Just remember to run your code through validators, and you'll be amazed at the things you've missed at times :) — Obsidian Age, Nov 20 '17 at 21:23

Pure css parallax effect producing uneven sections

1 Answers1