Some Things about Images and Background Images:

Background Images versus Image Tag Images
Background Images - Scrolling or not
Background Images - Tiling or not
A page should have a background colour if it has a background image


Background Images versus Image Tag Images:

When setting a page or an element within a page to have a background image, be aware that background images act differently depending on the width of the element they are the background image for. Background images also behave differently than tag images in several ways. Here is a brief, but hopefully useful, comparison:

Background images: (preferably set using CSS)
  1. add to the download time of the page

  2. can be gifs, jpgs, or pngs

  3. can be transparent gifs

  4. can be animated gifs (though this generally destroys the readability of the page)

  5. DO NOT cause scrolling (scroll bars that go sideways or up and down)

  6. CAN and WILL tile (tiling means repeating across the background of the page to fill up the space) if the browser window is wider and/or taller than the background image. Whether the window is bigger than the background image partially depends on the monitor's resolution setting.

Tiling can be controlled in a detailed manner using CSS, so that an image may tile only in the vertical or horizontal direction, or in both directions. CSS can also set an exact location of a background image, and can prevent the background image from tiling.

Normal images: (using image tags)
  1. add to the download time of the page

  2. can be gifs, jpgs, or pngs

  3. can be transparent gifs

  4. can be animated gifs

  5. Cause scrolling depending on their size, the size of the window, and the monitor's resolution setting

  6. DO NOT tile

The last 2 items about background images above are especially important to consider when planning and creating background images, because these 2 factors can strongly influence the visual layout of your page.


Background Images - Scrolling or not:

Background images do NOT cause scrolling (sideways or up-and-down) no matter how wide or tall they are!
However, if you are creating a web site aimed at 1024x768, the images in image tags on the page need to be less than 1024 pixels wide in order to not cause sideways scrolling.

This means that a background image used for the background of a page in the above site could be 1024 pixels across, and no sideways scrolling would occur. Background images are not affected by the page’s conventional margin size, because background images are behind the margins and the page elements that the margins affect.


Background Images - Tiling or not:

In fact, a background image for a page in a site meant to be viewed at 1024x768 will tile (repeat across or down the window) if the background image is not at least the size of the window itself at 1024x768 resolution. (At least, it will if you are not using CSS to control how it tiles.)

Not Tiling:

If you don't want your background image for your page to repeat at 1024x768 resolution, for example, it must be at least 1024 pixels across, and probably at least 768 pixels high. Same rule applies to other resolutions.
- or -
You can use CSS to tell any background image not to tile.

To be on the safe side, and to better accommodate higher resolution settings, you can create a background image for a page that is even larger – one that is at least the width and height of the next larger and most common resolution. In fact, people sometimes deliberately create background images large enough not to tile even at several different resolution settings. (Assuming CSS is not being used to prevent tiling.) The disadvantage of this large background image approach is that it increases the file size of the background image, and therefore the download time of the page. But occasionally these even larger background images may take up little enough memory to be worth using.

OR you can just use CSS to set the image so that it will not tile! See the week 2 notes about CSS controlling background image tiling.

OR you can (ideally use CSS) to use the image in question as the background not for the page, but for an element on the page that may be large, but is a little smaller than the entire page itself. This element could be a table or a div that is a major part of the page’s layout (either the key part(s) of the layout, or a flexible container holding the most key parts of the layout).

Background Images - Tiling:

You may create background images that are supposed to tile (repeat) to fill up the background.

Non-CSS methods of setting backgrounds for pages and tables do not allow you to control the tiling with code; the image will tile either horizontally, or vertically, or both, based on the dimensions of the image compared to the dimensions of the element it is the background for. To clarify what this means, consider these three examples:


A page should have a background colour if it has a background image:

It is good to set a background colour even if you are using a background image because the image will take some time to load, especially over a slower connection. During the time the audience is waiting for the background image to load, they are seeing nothing (either white or grey) as the background of the page or element if you have not also set the page/element's background colour. Often, this "nothing" as the background colour does not improve the look of your page. It is best, therefore, to set a background colour for the page/element that closely approximates the main colour or shade in the background image.