• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Chapter 14. Background Properties > background-repeat Property

14.3. background-repeat Property

The background-repeat property is always used in conjunction with the background-image property, and it determines how an image will be tiled on a Web page. The default value is repeat, which works the same way that <body background="image.gif"> or <body style="background-image: url(image.gif)"> does by simply repeating the background image both across and down the Web page. The background-repeat property comes with four other values:

  • repeat-x tiles the image horizontally,

  • repeat-y tiles the image vertically,

  • no-repeat tells the browser not to tile the image at all, and

  • inherit takes on any parent value that may be present.

As an example, Listing 14.3 tiles the image file in a strip that runs down right side of the Web page, and also across the top of a table.

Listing 14.3. background-repeat

<title>background-repeat example</title>
body {background-image: url(aurelian.jpg); background-repeat: 
table {background-image: url(aurelian.jpg); background-repeat:
em {font-size: x-large; color: lime}
table {position: absolute; top: 0; left: 0}

<em>This page contained tiled images of a coin of the ancient 
Roman emperor Aurelian, who reigned from 270 - 275 AD. He managed
to drive the barbarians out of Italy, and restored many provinces 
back into the empire. He was murdered by his own guards, the fate
of many Roman emperors.</em>
<em>Note how the image of the coin is tiled down the left side of
the Web page, while it is tiled across the top of this table. Neat, 



Figure 14-4. The effects of background-repeat as seen within Opera 6.0.

Browser Compatibility

This property is supported fully in the most recent versions of Internet Explorer and Netscape Navigator, though it is worth noting that Netscape Navigator 4.x is given only a “Partial” rating.

  • Internet Explorer 3.0: Unsafe.

  • Internet Explorer 4.0: Safe.

  • Internet Explorer 4.0 – 4.5 (Mac): Safe.

  • Internet Explorer 5.0: Safe.

  • Internet Explorer 5.1 – 5.2 (Mac): Safe.

  • Internet Explorer 5.5: Safe.

  • Internet Explorer 6.0: Safe.

  • Netscape Navigator 4.0 – 4.79: Partial.

  • Netscape Navigator 4.0 (Mac & UNIX): Partial.

  • Netscape Navigator 6.0: Safe.

  • Netscape Navigator 7.0: Safe.

  • Mozilla 1.0: Safe.

  • Opera 3.6: Safe.

  • Opera 5.0: Safe.

  • Opera 6.0: Safe.

  • Konqueror: Safe.

Internet Explorer has implemented this property properly since version 4.0.

Netscape 4.x gets a Partial rating. It is safe when only a single background image is used, but if multiple images are displayed, this version of the browser has problems when the page is scrolled. Figure 14-5 displays the effects you can expect to see when multiple background images are used. In some instances it can crash the browser. This also one of those rare occasions when the Macintosh and UNIX versions of this browser diverge from the behavior seen in the Windows version — while it does not have the same problem as the Windows version, it can display a background image, its behavior can be quirky, especially when background-repeat is combined with background-position and the latter is set to a percentage value. These problems were fixed by the time Netscape Navigator 6.0 (and Mozilla 1.0) came on the scene.

Figure 14-5. The effects of multiple images set to background-repeat as seen within Netscape Navigator 4.79 for Windows.

Opera adopted this property fully beginning with version 3.6.

Konqueror properly implements this property.

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint