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?
repeat-y: This property is used to set the background image repeated only vertically. Example: html.
You can tile your image vertically by using background-repeat:repeat-y . This text is displayed in front of the repeating image.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With