Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Optimum size of CSS tiled background-images

It's often stated that when tiling the background of a web page with background-image, that performance is better with an image of larger dimensions due to it needing to be tiled less frequently. For a while I've been making them 8x8 px, or multiples of 8.

But does anyone have links to data that prove this is the case across a range of browsers, taking in rendering times, or CPU load at various points of page rendering?

like image 975
Andy Hume Avatar asked Feb 08 '11 11:02

Andy Hume


2 Answers

I'd imagine it matters very little in these modern browsers you listed in your comment:

IE 8/9, and latest versions of Firefox/Safari/Chome/Opera

However, I have heard of a bug in IE8 when it comes to an image of exactly the size 1px * 1px:

Internet Explorer 8 doesn't perform the repeat of a 1x1 pixel semi-transparent background image correctly when any other element on the page is using the "-ms-filter" drective for the alpha transparency:

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

See: http://nemesisdesign.net/blog/coding/ie8-1x1px-semi-transparent-background-bug/
and the demo: http://static.nemesisdesign.net/demos/ie9-1x1px-semi-transparent-background/

So, 8x8 seems like a good enough size to use. I'd be surprised if anyone on the Internets has cared enough about this to rigorously benchmark it.


I did find this, which discusses the subject:
http://blogs.adobe.com/dreamweaver/2011/02/optimal-css-tiled-background-image-size.html

Make sure to also read the comments.

To sum it up, I'm going to quote myself from months ago:

I'd imagine it matters very little in [the] modern browsers [IE 8/9, and latest versions of Firefox/Safari/Chome/Opera] you listed in your comment.

like image 95
thirtydot Avatar answered Oct 14 '22 03:10

thirtydot


In some email clients the image won't repeat unless the background image is at least 25X25 so I've settled on that as my default size.

like image 33
peer1sucksbigones Avatar answered Oct 14 '22 02:10

peer1sucksbigones