Background Repeat

CSS background-repeat

The background-repeat property sets if/how a background image will be repeated.

By default, a background-image is repeated both vertically and horizontally.

Some images should be repeated only horizontally or vertically, or they will look strange, like this:

Example

body
{

  background-image: url("gradient_bg.png");

}

CSS background-repeat Horizontally

If the image above is repeated only horizontally (background-repeat: repeat-x;), the background will look better:

Example

body
{

  background-image: url("gradient_bg.png");

  background-repeat: repeat-x;

}

Tip: To repeat an image only vertically, use background-repeat: repeat-y;

CSS background-repeat: no-repeat

Showing the background image only once is also specified by the background-repeat property:

Example

body
{

  background-image: url("img_tree.png");

  background-repeat: no-repeat;

}

In the example above, the background image is placed in the same place as the text. We want to change the position of the image, so that it does not disturb the text too much.

CSS background-position

The background-position property is used to set the starting position of the background image.

By default, a background-image is placed at the top-left corner of an element.

Example

body
{

background-image: url("img_tree.png");

background-repeat: no-repeat;

background-position: right top;

}

The CSS Background Repeat and Position Properties

Video: CSS Background Repeat and Position