My fixed background made scrolling the site very slow, what can I do to improve it?

Question

I changed the background of my discussion forum using the CSS below

http://forum.antinovaordemmundial.com

html {
    background: url(http://antinovao         


        

Answer 1

Also, applying the following style to the html tag improves the frame rate significantly in WebKit browsers, Chrome included:

-webkit-transform: translate3d(0,0,0);

This works in all cases with (large) background photos and choppy scrolling as far as I can tell.

Answer 2

I thought I would just contribute here. Rather than use background-attachment: fixed; use :before and position: fixed; problem sorted. I ran into this same problem.

Read more here: http://fourkitchens.com/blog/article/fix-scrolling-performance-css-will-change-property

Answer 3

Compressing the image (reducing the size), solved my issue, I highly recommend using a tool like Radical Image Optimization Tool (RIOT), very effective and easy.

On linux, this can be done using GIMP , you can also remove image's metadata to reduce the size, use tool like exiftool.

Answer 4

The problem goes away for me when I remove the background-size property. I think it was the scaling of the large image that was causing the problem. If that doesn't work, just remove the background image altogether. However, I've never heard of a large background image causing lag before.

Answer 5

I had the same problem and solved it using this jQuery plugin : http://srobbin.com/jquery-plugins/jquery-backstretch/

It doesn't use any CSS3 property but it works fine and doesn't have any performance issue on Chrome 13 or Firefox 6.

Answer 6

Changing your image file type to SVG significantly improved the performance of my site when experiencing the same issue!