2

I just had an issue, that I have 2 hero image sections on the same page, and I had to use background-attachement: fixed on them. Don't have to say, that the scroll is very slow on most browsers (looking at you IE). So the performance is not very good. Oh and this site has also some parallax scrolled elements (with stellar.js) with smooth scroll (used: nicescroll.js for this). Ofcourse I made the images as small as possible and try not to use background-size: cover (performance again). Oh and I use the window.requestAnimationFrame() in my core.js file (performance again).

Is there a way to make this 2 hero sections images work like background-image: fixed ?

index.html

<div class="first-hero">

</div>
<div class="content">
    .
    .
    lots of parallax content goes here
    .
    .
</div>
<div class="second-hero">

</div>

style.css

.first-hero{
  background: transparent url('image1.jpg') no-repeat;
  background-attachment: fixed;
  height:400px;
  width:100vw;
}
.second-hero{
  background: transparent url('image2.jpg') no-repeat;
  background-attachment: fixed;
  height:350px;
  width:100vw;
}
.content{
  width:100vw;
  height:2500px;
}
5
  • have you tried wrapping the background image div inside another one to see if it helps???
    – Toxide82
    Commented Mar 8, 2017 at 13:57
  • @Toxide82 yes. tried it. didn't worked for me.
    – cs.matyi
    Commented Mar 8, 2017 at 14:00
  • 1
    you have spelt 'attachement' wrong in your CSS should be 'attachment'... not sure if that's in your code or just on here :)
    – Toxide82
    Commented Mar 8, 2017 at 14:06
  • @Toxide82 I just write it here on the flow. Believe me, you dont want that huge "wall of text" here, but i will correct it right now. Thanks!
    – cs.matyi
    Commented Mar 8, 2017 at 14:11
  • no worries i added an answer below - I'll edit that part out.
    – Toxide82
    Commented Mar 8, 2017 at 14:12

2 Answers 2

4

Historically, background-attachment:fixed;has always suffered from performance issues. I would suggest that instead of this, a position:fixed; element is used instead.

Then, you can make the fixed background and the scrollable content sections sit on their own layers in the GPU, by using transform:translateZ(0); - this should offer additional performances gains.

Fiddle: https://jsfiddle.net/gstnr9w5/1/

.fixed-background{
  position:fixed; 
  left:0;
  top:0;
  right:0;
  bottom:0;
  background:url(https://unsplash.it/1000/1000?image=1080);
  background-size:cover;
  background-position:center center;
  z-index:0;
}

.content{ position:relative; z-index:1; color:white; font-size:22px; line-height:32px; font:serif; padding:80px; }


.fixed-background, .content{
  transform:translateZ(0);
  -webkit-transform:translateZ(0);
  -moz-transform:translateZ(0);
}
2
  • 1
    This doesn't appear to be a solution for when the element that contains the background image is needed to scroll in and out of view also, which is quite a popular need at the moment. Commented Jun 5, 2017 at 9:38
  • @biscuitstack that's true - that effect can be achieved in a performant way but it's not so straight forward. I can provide an example if needed. Commented Jun 5, 2017 at 17:45
-1

in your second hero CSS statement try the below:

.second-hero{
   background: transparent url('image2.jpg') no-repeat;
   background-attachment: fixed bottom;
   height:350px;
   width:100vw;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.