The most efficient way to set a background to a website

When developing a website for the Portfolio Page in Responsive Web Design Projects I came across a peculiar issue … In order to set a background-image that covers the entire screen and does not move when the user scrolls through I applied the following CSS code to the body tag:

body{
  background-image: url('image-url');
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  background-size:cover;
}

This method worked well for a previous responsive web design projects, namely, Survey Form. Despite using the same method and wallpapers of similar resolution the Portfolio Page is scrolling considerably slower. Note: I am not speaking about clicking the links in the navbar but I am speaking about manually scrolling through the site. I assumed that maybe the background-attachment:fixed; was trying to realign the background as the user scrolls through thereby making the scrolling of the page slower. I did deactivate that property in chrome dev tools and indeed the page started scrolling as fast as the Survey Form. What is even more weird is that the Portfolio Page works really well on mobile, the problem is only on a computer. So instead tried using a seperate img element and set it’s properties to:

#bg-img{
  /* Ensuring the image covers the screen */
  width:100vw;
  height: 100vh;
  /* Making the image stays fixed */
  position: fixed;
  top: 0px;
  left: 0px;
  /* Ensuring it stays in the background */
  z-index: -10;
}

This approach made the site faster while scrolling. Note : There is no difference in loading speed either way only in scrolling speed while manually scrolling. So my questions are:

  • Why does background-attachment:fixed; approach make the site scroll slower.
  • Why does ‘using a seperate image element’ approach make the site scroll faster.
  • Why does both work in a mobile phone.
  • Which approach is usually recommended.
    Note : I am extremely sorry if the post is too long or if I am asking too many questions.

The improved solution with the image element approach can be found here. Sorry I forgot to include this in the post

Interesting. I tested this in several different browsers and in all the Chrome based browsers I noticed the scrolling difference, but in Firefox there is no difference at all, they are both very fast.

Different browsers implement things different ways. You must have stumbled upon some sort of quirk with Chrome. I don’t know if anyone will be able to answer all of your questions, such as Why? That’s why you should always test with several browsers, including both Chrome and Firefox, just to make sure you are triggering some sort of obscure bug. The important thing is you have figured out a workaround. This will happen more than you think if you end up doing this professionally.

1 Like

So I don’t need to care as I found a workaround. Thank.

But it works on the chrome browser on mobile though/

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.