I am trying to make the background image on a div change its scale as per the amount of page scrolled. Tried a lot but this is what I achieved. It starts ok with the image completely covering the div, but the moment I scroll it snaps to a smaller size and when I scroll all the way top again, the image never gets back to 100% cover. Please help. The code is below as well as on

CodePudding user response：

you almost made it instead of using auto use the calculated width and set the height to 100%

bg.style.backgroundSize = '' (130   x/10) '% 100%'

Codepen :)

CodePudding user response：

Because you scroll all the way top again, bg.style.backgroundSize = 'auto 130%', The value of bg.style.backgroundSize should null.