greeneggsandsam
New Member
I have a one-page website and I've added some sections with big background images set on them. I wanted them to have a "fixed" effect so when user scrolls they don't move. So I used \[code\]background-size: cover;\[/code\] and \[code\]background-attachment: fixed\[/code\]. This does the job. The problem however, is it's extremely laggy in Chrome, I think chrome doesn't cache images or something. You can test it here: http://jsfiddle.net/sallar/rwyfZ/1/its not smooth like other browsers. So I tried using images (in this case using $.backstretch). Using this method the scrolling lag is fixed and scrolls very smoothly, but it doesn't have the "fixed" effect I wanted. So I thought I should use a parallax effect. But none of the parallax plugins or methods I tried did a good a job on "images", they were all optimized for background-image which I can't use because of that problem in Chrome.Here is a demo of Backstretch example:http://jsfiddle.net/sallar/FX4Cn/1/So, What should I do to make them have a fixed style and make the page scroll smoothly like the second example?
Thanks in advance.
Thanks in advance.