Thursday, October 7, 2010

Joshua asked me last week how to make a background image on a web page not repeat. By default, an image you set as a background image will default.

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.

Solution
It is possible to do this using Cascading Style Sheets (CSS1). If we have time near the end of the semester we will review some basic CSS.

1 comment:

  1. OKay. I think this was helpful. I also think the idea of putting it in a table was helpful.

    ReplyDelete