Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Are repeated backgrounds in html more efficient if they are larger than 1px?

If there is a one-dimensional background that is repeated on a certain dimension, is there any mentionable difference in performance if the image is e.g. 1px wide versus 10 or 20 pixels wide?

like image 679
devios1 Avatar asked Dec 02 '11 21:12

devios1


People also ask

Which background CSS property would cause the background image to repeat vertically?

repeat-y: This property is used to set the background image repeated only vertically. Example: html.

How do I tile an image in HTML?

You can tile your image vertically by using background-repeat:repeat-y . This text is displayed in front of the repeating image.


1 Answers

I assume you mean a two-dimensional background.

I can't imagine that there is any noticeable difference, on modern computers. However, because bandwidth is still at a premium, especially on mobile devices, I think you would be better off conserving bandwidth by repeating a 1px wide image instead of say 2 or 3 px wide.

UPDATE: We just ran a test, unscientifically, but certainly perceptually relevant, in which one page rendered a 10px green square over a 10,000,000px square div, and another page rendered a 1px green square over the same size div. All styles are set with CSS, both pages had no other content. The graphics were loaded locally. There was absolutely no perceptual difference in the rendering in either Safari 5 for Mac, or FireFox 8 for Mac. Still, it's possible that there could be performance issues on certain models of older (crappier) smart phones.

like image 174
Gregory Nacu Avatar answered Sep 20 '22 13:09

Gregory Nacu