How do I stop my background image from tiling?

Short Answer

There is no standards-based way of doing this in HTML. Some people create a large background (say, 1600x1200 pixels) and place the desired image in the appropriate place. Keep in mind that this "technique" has some serious drawbacks.

Long Answer

There is no way, using standard HTML, of doing it. That is, this ability is not defined in any of the HTML specs. In fact, the HTML 3.2 Reference Specification for the BODY tag defines the BODY tag's BACKGROUND attribute as specifying a URL for an image that will be used to tile the document background (emphasis added).

What some do to get around this problem is to create a huge background image (1600x1200 perhaps) that has the image they want seen in the top left corner (or around there) and the rest is some neutral color that complements the image. Keep in mind, though, that doing this has some serious drawbacks, not the least of which is the increase in download time. Other problems include additional overhead (memory), rendering time, and the hard drive space required to store the large image in cache.

It is possible to do this using Cascading Style Sheets (CSS1). This is accomplished via the background-repeat property and would be specified as:

BODY { background: url(bgimage.gif); background-repeat: no-repeat }

On a similar note, Microsoft Internet Explorer allows you to set your background as a "watermark" by adding the following to your document's BODY tag:

BGPROPERTIES=FIXED

As described on Microsoft's website, (190K document) this property "Specifies a 'watermark,' which is a background picture that does not scroll. The background image remains fixed behind any scrolling foreground information." Note that, despite this, your background image will still be tiled. It just won't scroll.

Keep in mind, though, this property will only work for those using MSIE. People using other browsers will still see your scrolling background (assuming that image loading is enabled and the browser can support images).


[Section Index] [Home Page]