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://antinovaordemmundial.com/mystuff/logo_blog.jpg) no-repeat center center fixed;
    background-image: url(http://antinovaordemmundial.com/mystuff/logo_blog.jpg);
    background-repeat-x: no-repeat;
    background-repeat-y: no-repeat;
    background-attachment: fixed;
    background-position-x: 50%;
    background-position-y: 50%;
    background-origin: initial;
    background-clip: initial;
    background-color: initial;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

The image is 1600x711 and 88k. The scrolling of the pages are now very slow. Is the CSS problematic or the image should be smaller somehow?

Edit: I tried changing to:

body {        
    color: #000;
    font-family: Verdana, Arial, Sans-Serif;
    font-size: 13px;
    text-align: center; /* IE 5 fix */
    line-height: 1.4;
    background-attachment: fixed;
    background-clip: initial;
    background-color: #51010E;
    background-image: url(http://antinovaordemmundial.com/mystuff/logo_blog.jpg);
    background-origin: initial;
    background-position: initial initial;
    background-repeat: initial initial;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
}

But it is still very slow on scrolling.

I'm getting some lag in Chrome 13, and its causing a lot of CPU use when scrolling. Does the problem go away if you remove the background image? — John Stimac, Aug 12 '11 at 01:27
+1 for high CPU usage in Chrome 13--it's eating 100% of one of my cores when scrolling — STW, Aug 12 '11 at 01:45
Also, from a design perspective, it seems like it might be a bad idea to have a resizing background when the width of the content remains the same. It looks like your trying to make the middle area glow white using the background. which would not work correctly unless they size dynamically in unison. — John Stimac, Aug 12 '11 at 01:49
I cleaned up the middle area to try to decrease the image size... — Emerson, Aug 12 '11 at 01:53
Jcubed, I removed the image the changed the background color, that solved the lag. A shame though. — Emerson, Aug 12 '11 at 01:59

score 17 · Answer 1 · answered Apr 14 '16 at 17:02

17

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

answered Apr 14 '16 at 17:02

user2810762

375
6
12

2

Awesome solution. no jquery, just pure css3! – TetraDev Jun 16 '16 at 23:09
2

This doesn't work with multiple elements using background-attachment – all jazz Jun 28 '17 at 07:51
This comes as the first Google result for me now and it worked perfectly. This should be the accepted answer. – Luca Steeb Jul 10 '17 at 15:11
Found this solution as well. I have a background per section, which gives each transparent bit its own fixed background as you scroll by. Unfortunately this trick doesn't work in that instance. – Julian F. Weinert May 12 '18 at 12:58
This is the best solution imo – Reasoned Aug 02 '21 at 00:36

score 13 · Answer 2 · answered Aug 31 '11 at 16:31

13

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.

answered Aug 31 '11 at 16:31

kossdav

149
2

Yep, loved not blocking my page rendering with the css and background. +1 and thanks! – eduncan911 Apr 21 '14 at 02:09

score 6 · Accepted Answer · answered Aug 12 '11 at 01:31

6

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.

answered Aug 12 '11 at 01:31

John Stimac

5,335
8
40
60

1

The `background-size` property is certainly making an impact, but the site still seems to scroll slowly with it disable. I'd say it's a 100% improvement, but there's still an issue. – STW Aug 12 '11 at 01:38
@STW: What if you remove the image entirely? – John Stimac Aug 12 '11 at 01:39
Removing the image appears to completely resolve the issue, regardless of the `background-size` being enabled or disabled. However, it wouldn't seem to do much for the OP's question ;-) – STW Aug 12 '11 at 01:43
I removed the image altogether, although I would had prefered to keep it. I will test without the background-size property. – Emerson Aug 12 '11 at 03:45
Is there a suitable replacement for background-size? I have the same lag issue when scrolling and am also using large images at about the same size and k-weight – Robbie Jan 17 '13 at 19:40
It's probably not the size of the image itself, but I would guess that browsers are for some reason, resizing the image every frame. Just a guess. – Hawken Nov 18 '13 at 00:28
19

This is no solution. "Remove your code and it will work", come on. – tobi.at Sep 30 '14 at 09:44
my image's size was very big , so when i resized it, it's working fine. without removing the background-size: "cover". – M_abosalem Nov 16 '21 at 17:19

score 2 · Answer 4 · answered Jan 23 '17 at 14:32

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.

score 1 · Answer 5 · answered Feb 19 '18 at 18:04

1

The issue is actually with the background-attachment fixed value if you change it to background-attachment: scroll for mobile devices it should fix the lag.

answered Feb 19 '18 at 18:04

WPExplorer

119
4

score 1 · Answer 6 · edited Jun 12 '21 at 19:04

1

make the background-size to 99.9% not 100% or cover in the case of the fixed attachment

background-size : 99.9%;

edited Jun 12 '21 at 19:04

I_love_vegetables

1,575
5
12
26

answered Jun 11 '21 at 18:54

Karbs

9
1

Exil · Answer 7 · 2017-08-10T12:27:01.880

0

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.

edited Aug 10 '17 at 12:27

answered Jul 09 '17 at 06:41

Exil

311
2
11
26

score 0 · Answer 8 · answered May 19 '20 at 09:39

0

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

answered May 19 '20 at 09:39

Andy Clarke

1

1

This is not an answer. – RKRK May 19 '20 at 10:10

score 0 · Answer 9 · edited Mar 22 '22 at 13:08

0

Remove background-repeat property if you have included and don't use 100% value for background-size..

background-size: 0 - 99.9%;

edited Mar 22 '22 at 13:08

Sfili_81

2,377
8
27
36

answered Mar 22 '22 at 11:30

Arunkumar09

117
1
8

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

9 Answers9

Linked