CODEWITHSUNDEEP
htmlcssbackground-position
alexismorin
alexismorin

Reputation: 856

background-attachment: fixed moving backwards on Chrome

I'm experiencing a very strange bug with background-position: fixed in Chrome (v67 on macOS) where the background image actually moves up when I scroll, rather than being fixed.

Here is a codepen of the issue: https://codepen.io/alexismo/pen/xzwmRE and here is a gif of it: https://gfycat.com/PolishedHarshAfricangroundhornbill

The content of the page is structured as 

<body>
    <div class="background-image"></div>
    <div class="rest-of-the-site"></div>
</body>

.background-image {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    z-index: -1;
}

Upvotes: 3

Views: 2488

Answers (7)

awtrimpe
awtrimpe

Reputation: 56

I had the same issue and it involves the fact that there is a "position: absolute" that falls above your "position: fixed" in the hierarchy of CSS rules. Look for the absolute positioning that is causing your issue. For me, I went into the Developer Tools of Chrome and unchecked the boxes which had positions counter to "fixed" until I pinpointed the issue. Mine was in a piece of Javascript code. Hope this can help someone.

Upvotes: 0

Martin H&#246;ger
Martin H&#246;ger

Reputation: 854

It is a bug in Google Chrome 67. This will fix it, give it a try:

@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) {
    transform: translate3d(0,0,0);
    -webkit-transform: translate3d(0,0,0);
}

More at: https://victorfont.com/workaround-for-chrome-67-parallax-bug/

Upvotes: 0

Be&#246;be
Be&#246;be

Reputation: 69

First, apply position: relative to the body tag, since it is the ancestor of your background-image div.

Then set the height of the .background-image to 100vh. This will make it the height of the window, but it won't always be in view.

/* Since the body element is the parent of the .background-image, we need to set its position to relative */
body {
  position: relative;
}

.background-image {
  position: absolute;
  width: 100%;
  height: 100vh; /* be exactly the height of the viewport, no bigger */
  top: 0;
  left: 0;
  background-image: url('http://alexismorin.com/images/watertown.jpg');
  z-index: -1;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}

p {
  color: #333;
}
<div class="background-image"></div>
<div>
  <p>
    Site is here
  </p>
  <p>
    Site is here
  </p>
  <p>
    Site is here
  </p>
  <p>
    Site is here
  </p>
  <p>
    Site is here
  </p>
  <p>
    Site is here
  </p>
  <p>
    Site is here
  </p>
  <p>
    Site is here
  </p>
  <p>
    Site is here
  </p><p>
    Site is here
  </p>
  <p>
    Site is here
  </p>
  <p>
    Site is here
  </p>
  <p>
    Site is here
  </p>
  <p>
    Site is here
  </p>
  <p>
    Site is here
  </p><p>
    Site is here
  </p><p>
    Site is here
  </p>
  <p>
    Site is here
  </p>
  <p>
    Site is here
  </p>
  <p>
    Site is here
  </p>
</div>

Upvotes: 0

git-e-up
git-e-up

Reputation: 904

I usually use a pseudo element instead. Try this:

body:after{
    content: '';
    background-image: url('http://alexismorin.com/images/watertown.jpg');
    background-size: cover;
    opacity: 1;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: fixed;
    z-index: -1;
}

Upvotes: 0

Mickey
Mickey

Reputation: 31

This looks like a bug in the latest release of Chrome. This is not the intended behavior. I would recommend filing a bug report if one is not already entered.

Upvotes: 2

Master.Deep
Master.Deep

Reputation: 812

Its working in the desired way. For more clarity go through this

Although what you wish to achieve can be done by bit tweaking in your code:

.background-image {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: url('http://alexismorin.com/images/watertown.jpg');
  z-index: -1;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}

p {
  color: #333;
}
<div class="background-image">
  <div>
    <p>
      Site is here
    </p>
    <p>
      Site is here
    </p>
    <p>
      Site is here
    </p>
    <p>
      Site is here
    </p>
    <p>
      Site is here
    </p>
    <p>
      Site is here
    </p>
    <p>
      Site is here
    </p>
    <p>
      Site is here
    </p>
    <p>
      Site is here
    </p>
    <p>
      Site is here
    </p>
    <p>
      Site is here
    </p>
    <p>
      Site is here
    </p>
    <p>
      Site is here
    </p>
    <p>
      Site is here
    </p>
    <p>
      Site is here
    </p>
    <p>
      Site is here
    </p>
    <p>
      Site is here
    </p>
    <p>
      Site is here
    </p>
    <p>
      Site is here
    </p>
    <p>
      Site is here
    </p>
  </div>
</div>

Upvotes: 0

curious lad
curious lad

Reputation: 164

it is not a bug, that is how is background-attachment should work. If you want image to stay on screen you should use position:fixed;

Upvotes: 0

Related Questions