background tiling

[chuck]

Hi,
i was wondering how background tiling works. I've got a very small pic(10 pix by 100 pix) that i've set as background picture, so it tiles 100's of times on the page. so when someone looks at the page, am i right in thinking that the browser only downloads the pic once and then displays it many times? therefore the more it tiles it shouldn't make any difference on download times?
thanks,
chuck

[chuck]

Hi,
i was wondering how background tiling works. I've got a very small pic(10 pix by 100 pix) that i've set as background picture, so it tiles 100's of times on the page. so when someone looks at the page, am i right in thinking that the browser only downloads the pic once and then displays it many times? therefore the more it tiles it shouldn't make any difference on download times?
thanks,
chuck

[chuck]

sorry more,
is it possible to limit the number of times something 'tiles' ie. if you've got a bigger pic and you only want it displayed once in the background.
thanks again,
chuck

[Ross Macintosh]

Chuck - You are correct in thinking that the image is downloaded once and repeated as needed by the browser. A tile can be as dimensionally small as is needed to contain the design info. You can for instance get a fine-lined background from a two-colour tile that is 1x2 pixels. Many designers make there small tiles bigger than they need to be - I think it has to do with being able to see the preview in their graphics programs.

As far as I know it is not possible to spec the number of tiles but there are work-arounds. Frames and tables can be used to limit backgrounds in a design. I imagine there are dhtml work-arounds to. It is relatively simple to use dhtml to place a single image in a layer behind your text. I'm not so sure about tiled images with dhtml.

If you want to place a single image in the background it can be a single large image suited to your target browser resolution. Of course the file size of such an image can become significant. When pros use a large image they frequently use a image with a very limited pallet which can help keep file size under control.

Hope this helps.

Regards, Ross

<a href=http://www.designstop.com/>DesignStop.Com</a>

[chuck]

Thanks heaps Ross, that was really helpful!
chuck

[BobInce]

Ross: there are a couple of other reasons for making background images larger. Firstly, a very small background image has to be drawn an excessive number of times to fill the page, and this can slow down some browsers. Secondly, Netscape 4 has a bug where small tiles in table cell backgrouds are often not displayed at all. The size required to ensure display seems very variable, but about 64x64 upwards seems to work usually.

Chuck: in CSS, you can specify that a background will repeat either once or an infinite number of times. There's no in-between setting, but you can specify horizontal and vertical tiling separately. Give the element with the background a style 'background-repeat: no-repeat' (or repeat-x, or repeat-y) to override the normal behaviour.

This works on IE4+, Mozilla/Netscape 6, Opera, at least. It does't work on Netscape 4 (which tiles forever regardless). Careful with using 'background-position' with this in IE4/Win, where things only tile to the right and downwards.

[NAFFAEL]

I have been using X for a while now but never got into the fine details of the program, I would like detailedd instructions on how to make a fine lined background.

Any help is truly appreciated.