I changed the background of my discussion forum using the CSS below
我使用下面的CSS更改了我的论坛的背景
http://forum.antinovaordemmundial.com
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?
图像为1600x711和88k。页面的滚动现在非常慢。 CSS有问题还是图像应该以某种方式变小?
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.
但滚动时仍然很慢。
6 个解决方案
#1
8
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.
当我删除background-size属性时,问题就消失了。我认为这是导致问题的大图像的缩放。如果这不起作用,只需完全删除背景图像。但是,我从来没有听说过导致滞后的大背景图像。
#2
12
I had the same problem and solved it using this jQuery plugin : http://srobbin.com/jquery-plugins/jquery-backstretch/
我遇到了同样的问题并使用这个jQuery插件解决了它: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.
它不使用任何CSS3属性,但它工作正常,并且在Chrome 13或Firefox 6上没有任何性能问题。
#3
9
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.
我以为我会在这里做出贡献。而不是使用background-attachment:fixed;使用:之前和位置:固定;问题排序。我遇到了同样的问题。
Read more here: http://fourkitchens.com/blog/article/fix-scrolling-performance-css-will-change-property
点击此处了解更多信息:http://fourkitchens.com/blog/article/fix-scrolling-performance-css-will-change-property
#4
0
Also, applying the following style to the html
tag improves the frame rate significantly in WebKit browsers, Chrome included:
此外,将以下样式应用于html标记可在WebKit浏览器中显着提高帧速率,Chrome包括:
-webkit-transform: translate3d(0,0,0);
This works in all cases with (large) background photos and choppy scrolling as far as I can tell.
就我所知,这适用于所有情况下(大)背景照片和不连贯的滚动。
#5
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.
压缩图像(缩小尺寸),解决了我的问题,我强烈建议使用像Radical Image Optimization Tool(RIOT)这样的工具,非常有效和简单。
On linux, this can be done using GIMP , you can also remove image's metadata to reduce the size, use tool like exiftool.
在linux上,这可以使用GIMP完成,您也可以删除图像的元数据以减小大小,使用像exiftool这样的工具。
#6
0
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.
如果您将其更改为背景附件,问题实际上是背景附件固定值:滚动移动设备它应该修复延迟。
#1
8
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.
当我删除background-size属性时,问题就消失了。我认为这是导致问题的大图像的缩放。如果这不起作用,只需完全删除背景图像。但是,我从来没有听说过导致滞后的大背景图像。
#2
12
I had the same problem and solved it using this jQuery plugin : http://srobbin.com/jquery-plugins/jquery-backstretch/
我遇到了同样的问题并使用这个jQuery插件解决了它: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.
它不使用任何CSS3属性,但它工作正常,并且在Chrome 13或Firefox 6上没有任何性能问题。
#3
9
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.
我以为我会在这里做出贡献。而不是使用background-attachment:fixed;使用:之前和位置:固定;问题排序。我遇到了同样的问题。
Read more here: http://fourkitchens.com/blog/article/fix-scrolling-performance-css-will-change-property
点击此处了解更多信息:http://fourkitchens.com/blog/article/fix-scrolling-performance-css-will-change-property
#4
0
Also, applying the following style to the html
tag improves the frame rate significantly in WebKit browsers, Chrome included:
此外,将以下样式应用于html标记可在WebKit浏览器中显着提高帧速率,Chrome包括:
-webkit-transform: translate3d(0,0,0);
This works in all cases with (large) background photos and choppy scrolling as far as I can tell.
就我所知,这适用于所有情况下(大)背景照片和不连贯的滚动。
#5
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.
压缩图像(缩小尺寸),解决了我的问题,我强烈建议使用像Radical Image Optimization Tool(RIOT)这样的工具,非常有效和简单。
On linux, this can be done using GIMP , you can also remove image's metadata to reduce the size, use tool like exiftool.
在linux上,这可以使用GIMP完成,您也可以删除图像的元数据以减小大小,使用像exiftool这样的工具。
#6
0
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.
如果您将其更改为背景附件,问题实际上是背景附件固定值:滚动移动设备它应该修复延迟。