htmlcssbackground-imagebackground-attachment

CSS - Fixed Background Attachment making white strip appears at some scroll positions

I have a header which has a background which is set to background-attachment: fixed;, but this is making a white strip appear at the top of the page at certain scroll positions (The background is blurred, so the strip is also blurred, but it is still visible).

The white strip at the top This is how it currently looks; there is that white glow sort of thing at the top, which is that strip that I am talking about

The code I have right now is this (If you run the snippet, please view it full screen, since I haven't made it mobile-compatible yet): Edit on Codepen

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  font-size: 1.02em;
}

html,
body {
  height: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 1.5em;
  line-height: 2em;
}

.container {
  margin: 0 auto;
  width: 80vw;
}

blockquote {
  box-sizing: content-box;
  position: relative;
  margin: 0 auto;
  display: block;
  padding-left: 30px;
  font-size: 1.5em;
  font-style: italic;
  color: #4a413c;
  border-left: 7px solid rgba(74, 65, 60, 0.5);
  quotes: "“" "”" "‘" "’";
  padding-bottom: 1.75em;
}

blockquote::before {
  position: absolute;
  top: 0.55em;
  left: -0.5em;
  content: open-quote;
  line-height: 0.2em;
  font-style: normal;
  font-size: 5em;
  font-family: 'Adobe Caslon Pro', serif;
  color: #4a413c;
}

blockquote::after {
  position: absolute;
  right: 0;
  bottom: 0;
  content: attr(data-author);
  font-style: italic;
  font-size: 0.75em;
  color: 4a413c;
}


/* Header */

header {
  position: relative;
  width: 100%;
  height: 60%;
  padding: 50px 100px;
  text-align: center;
  overflow: hidden;
  color: white;
  font-size: 1.5em;
  margin-bottom: 50px;
}

header.no-margin {
  margin-bottom: 0;
}

header .container {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%)
}

header .container h1 {
  position: relative;
  display: inline-block;
  font-weight: 300;
}

header .container h1::after {
  position: absolute;
  bottom: 1px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  content: '';
  width: 80%;
  height: 2px;
  border-bottom: 2px solid white;
}

header .container a {
  color: inherit;
  font-size: inherit;
  text-decoration: inherit;
  -webkit-transition: all 0.75s 0s;
  transition: all 0.75s 0s;
  border-bottom: 2px solid transparent;
}

header .container nav ul {
  list-style: none;
}

header nav ul li {
  display: inline-block;
  padding: 5px 30px;
}

header nav ul li a:hover {
  border-bottom: 2px solid white;
}

header .container p {
  width: 40%;
  margin: 0 auto;
}


/* Header Background */

.header::before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -100;
  content: '';
  display: block;
  min-height: 100vh;
  width: 100%;
  background-image: -webkit-radial-gradient(center ellipse, rgba(0, 0, 0, 0.3) 27%, rgba(0, 0, 0, 1) 100%), url(https://placeimg.com/640/480/any);
  background-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.3) 27%, rgba(0, 0, 0, 1) 100%), url(https://placeimg.com/640/480/any);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
  -webkit-filter: blur(7px) saturate(90%) brightness(120%) contrast(125%);
          filter: blur(7px) saturate(90%) brightness(120%) contrast(125%);
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
}

section.quote {
  position: relative;
  min-height: 40vh;
}

section.quote blockquote {
  position: absolute;
  width: 50%;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.section.latest {
  display: block;
  margin: 0 auto;
  clear: both;
}

div.latest {
  padding: 10px;
  position: relative;
  width: 25vw;
  height: 25vw;
  overflow: hidden;
  float: left;
  background-size: cover;
  background-position: center center;
  background-attachment: scroll;
  margin: 5px;
}

div.latest::after {
  content: '';
  clear: both;
}
<header class="header no-margin">
  <div class="container">
    <nav>
      <ul>
        <li><a href="#">Artwork</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Social</a></li>
        <li><a href="#">Comission</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
    <h1><a href="index.html">Blog Title</a></h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
</header>

<div class="container">
  <section class="quote">
    <blockquote data-author="Pablo Picasso">
      The meaning of life is to find your gift. The purpose of life is to give it away.
    </blockquote>
  </section>
  <main>
    <section class="section latest">
      <h2>Latest Artwork</h2>
      <div class="latest" style="background-image: url(https://placeimg.com/640/480/any);">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula tempus neque ut faucibus. Integer quam arcu, dictum in mattis nec, dapibus sed libero. Nam condimentum convallis elit eget placerat. Proin consectetur enim nulla, non hendrerit ante
        bibendum in. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam commodo velit sapien, vitae tempor neque faucibus et.
      </div>
      <div class="latest" style="background-image: url(https://placeimg.com/641/450/any);">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula tempus neque ut faucibus. Integer quam arcu, dictum in mattis nec, dapibus sed libero. Nam condimentum convallis elit eget placerat. Proin consectetur enim nulla, non hendrerit ante
        bibendum in. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam commodo velit sapien, vitae tempor neque faucibus et.
      </div>
      <div class="latest" style="background-image: url(https://placeimg.com/653/470/any);">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula tempus neque ut faucibus. Integer quam arcu, dictum in mattis nec, dapibus sed libero. Nam condimentum convallis elit eget placerat. Proin consectetur enim nulla, non hendrerit ante
        bibendum in. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam commodo velit sapien, vitae tempor neque faucibus et.
      </div>
    </section>
    <section class="section">
      <h2>Latest Posts</h2>
    </section>
  </main>
</div>

To see the strip, scroll down until there is only a small but of the header on the screen.

The strip goes when you change background-attachment: fixed; to background-attachment: scroll;, but I want to keep it fixed.

I feel like I'm overlooking something, but I cannot think of anything that might be causing this, so what is causing this issue, and how can I fix it?

Solution

  • I am new to parallax CSS (it is on my list-o-things-to-grok), but I think the problem is that you are translating the header (and therefore its background) down as the user scrolls the content up (this is what gives the parallax effect). Perhaps if you size the header so its top is above the viewport, as it scrolls down you won't see the white.