CSS background-repeat

CSS background-repeat is used to set the background image if repeat or not inside the block. CSS background image can be used to give the background of a block. A background repeat can be used when we want a small image to show many time to the background. This image can be any format like jpg, png etc. You should also see CSS background-attachment.

The syntax for CSS background-repeat is:

For Example:

Output

This is the HTML paragraph inside the div for background position text. This div contains background image of globe. This background image has given position center and is not repeated for many times. The background center make it at the center position inside the block.

CSS background-repeat values list

The values and description of this property is used to specify the background repeat of background image. You should also see CSS background-attachment.

Sr. No. value Description
1 repeat Used to make background image to repeat many time inside block.
2 no-repeat Used to make background image to not to repeat many time inside block. This makes image to appear for one time.
3 repeat-x Used to make background image to repeat horizontally inside block.
4 repeat-y Used to make background image to repeat vertically inside block.
5 round Used to make background image to the center position of the block.
6 initial Used to define as the property initial value.
7 inherit Used to define the computed value of property on the elements parent.

CSS background-repeat horizontally

In this example we will use CSS background-repeat to repeat the image vertically.

Output

This is the HTML paragraph inside the div for background position text. This div contains background image of globe. This background image has given position given in percentage.