totn CSS

CSS: background-repeat property

This CSS tutorial explains how to use the CSS property called background-repeat with syntax and examples.

Description

The CSS background-repeat property defines whether the background-image for an element is repeated (ie: tiled).

Syntax

The syntax for the background-repeat CSS property is:

background-repeat: value;

Parameters or Arguments

value

Defines whether the background-image repeats. It can be one of the following:

Value Description
repeat Image is repeated both horizontally and vertically
div { background-image: url("logo.png"); background-repeat: repeat; }
repeat-x Image is repeated horizontally
div { background-image: url("logo.png"); background-repeat: repeat-x; }
repeat-y Image is repeated vertically
div { background-image: url("logo.png"); background-repeat: repeat-y; }
no-repeat Image is not repeated
div { background-image: url("logo.png"); background-repeat: no-repeat; }
round Image is repeated as many times as will fit. Images are rescaled if an exact fit is not achieved
div { background-image: url("logo.png"); background-repeat: round; }
space Image is repeated as many times as can fully fit. White space between images is displayed if an exact fit is not achieved
div { background-image: url("logo.png"); background-repeat: space; }
inherit Element will inherit the background-repeat from its parent element
div { background-image: url("logo.png"); background-repeat: inherit; }

Note

Browser Compatibility

The CSS background-repeat property has basic support with the following browsers:

  • Chrome
  • Firefox (Gecko)
  • Internet Explorer (IE) (IE 9+ for space/round)
  • Opera (Opera 10.5+ for space/round)
  • Safari (WebKit)

Example

We will discuss the background-repeat property below, exploring examples of how to use this property in CSS.

div { background-image: url("/images/gradient.png"); 
      background-repeat: repeat; }

In this CSS background-repeat example, we have set a background-image for the <div> tag using the gradient.png file. Then we have set the image to repeat both horizontally and vertically.

It is also wise when setting a background-image to also set a background-color, in case the image is not available. Let's modify our example to add a background-color of black.

div { background-color: black; 
      background-image: url("/images/gradient.png"); 
      background-repeat: repeat; }

Now if the gradient.png image is not available, the <div> will still display a black background-color.

Share on: