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:
|
1 |
background-repeat: property value comes here; |
For Example:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html> <head> <title>CSS background-repeat syntax</title> <style> .div-bg-repeat{ background-image:url(../../images/recycle1.png); min-height:200px; background-position:center center; background-repeat:no-repeat; } </style> </head> <body> <div class="div-bg-repeat"> <p>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.</p> </div> </body> </html> |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html> <head> <title>CSS background-repeat syntax</title> <style> .div-bg-repeat{ background-image:url(../../images/recycle1.png); min-height:200px; background-position:20% 60%; background-repeat: repeat-x; } </style> </head> <body> <div class="div-bg-repeat"> <p>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.</p> </div> </body> </html> |
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.