Why is a tiled background better?

[Guest sdcman1]

I didn't know whether to put this in the Beginners section or what, but here is my question.

 

Why is it better to use a small image and tile it?

 

I know it's to make the file small and reduce bandwidth and stuff, but does using a tiled image increase file size or load time. I mean, say you have a small navigation bar, and decide to have a striped background. Instead of using a (for arguments sake) 20kb image, you can use a small 5kb image and have that repeat itself. If you repeat it 5 times horizontally, will that equate to a 25kb image?

 

Would the load time vary if it's a small image repeating over a large background? And how small can you go. Can you use a really small (say 1x1px) image and tile it over an area like 200x500px or bigger?

[jlhaslip]

If you repeat it 5 times horizontally, will that equate to a 25kb image?

No, only a single 5kb image would be transferred across the Interweb. And usually only once, because your Browser will cache the image if the page is using an external CSS style sheet.

Would the load time vary if it's a small image repeating over a large background?

An image of several hungred KB can be quite slow for dial-upusers.

And how small can you go. Can you use a really small (say 1x1px) image and tile it over an area like 200x500px or bigger?

Yes, a 1 x 1 px size image will cover the entire body element by repeating itself.

[falkencreative]

I suppose you could use a 1px image, but that would just result in a solid color. In that case, it most likely would be best to just use the CSS background-color property.

[LSW]

Here is the trick to it.

 

Make the image 1x2 pixels vertical (or horizontal for vertical stripes). Blow it up really large, color one side the way you want, place a box over the other side with the other color and compress to one image. Now you place it as the background and this all bot no existent image (weighing almost nothing) tiles giving you 1 pixel stripes.

 

If you want larger stripes use 2 x 2 etc.