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.