CSS - background-repeat Property
The background-repeat property of CSS controls the repetition of images on a background. The image can be repeated along the horizontal and vertical axes, or not repeated.
The repeated images gets clipped as per the size of the element, but they can be resized such that they fit within the element, using round and space values for background-repeat property.
Possible Values
<repeat-style>: The values can be passed in a one-value or a two-value syntax format.
One-value syntax is a shorthand for two-value syntax. Following table shows the equivalent values of both the formats:
Sr.No | One-Value Syntax | Two-Value Syntax |
---|---|---|
1 | repeat-x | repeat no-repeat |
2 | repeat-y | no-repeat repeat |
3 | repeat | repeat repeat |
4 | space | space space |
5 | round | round round |
6 | no-repeat | no-repeat no-repeat |
In two-value syntax, the first value defines the horizontal repetition of the image and second value defines the vertical behavior. Each keyword is described in detail:
repeat: Image is repeated in order to fill the complete painting area. Image may be clipped to fit in the space.
space: Image is repeated as much as required, without clipping it. The white space is distributed evenly between the images and the first and last image is pinned to either side of the element.
round: Image gets stretched, if the space increases and if another image is added, they compress to accomodate it and fill up the space.
no-repeat: Image is set not to repeat.
Applies to
All the HTML elements.
DOM Syntax
object.style.backgroundRepeat = "repeat | no-repeat | space | round";
CSS background-repeat - repeat Value
Here is an example to set the repetition behavior of the background image, as repeat:
<html> <head> <style> .repeat { background-image: url('images/tutimg.png'); background-repeat: repeat; width: 800px; height: 400px; border: 3px solid black; position: relative; } </style> </head> <body> <div class="repeat"></div> </body> </html>
CSS background-repeat - no-repeat Value
Here is an example to set the repetition behavior of the background image, as no-repeat:
<html> <head> <style> .no-repeat { background-image: url('images/tutimg.png'); background-repeat: no-repeat; width: 500px; height: 400px; border: 3px solid black; position: relative; } </style> </head> <body> <div class="no-repeat"></div> </body> </html>
CSS background-repeat - repeat-x Value
Here is an example to set the repetition behavior of the background image, as repeat-x:
<html> <head> <style> .repeat-x { background-image: url('images/tutimg.png'); background-repeat: repeat-x; width: 800px; height: 300px; position: relative; } </style> </head> <body> <div class="repeat-x"></div> </body> </html>
CSS background-repeat - repeat-y Value
Here is an example to set the repetition behavior of the background image, as repeat-y:
<html> <head> <style> .repeat-y { background-image: url('images/tutimg.png'); background-repeat: repeat-y; width: 800px; height: 300px; position: relative; } </style> </head> <body> <div class="repeat-y"></div> </body> </html>
CSS background-repeat - space Value
Here is an example to set the repetition behavior of the background image, as space:
<html> <head> <style> .space { background-image: url('images/logo.png'); background-repeat: space; width: 800px; height: 400px; border: 3px solid black; position: relative; } </style> </head> <body> <div class="space"></div> </body> </html>
CSS background-repeat - round Value
Here is an example to set the repetition behavior of the background image, as round:
<html> <head> <style> .round { background-image: url('images/tutimg.png'); background-repeat: round; width: 800px; height: 400px; border: 3px solid black; position: relative; } </style> </head> <body> <div class="round"></div> </body> </html>
CSS background-repeat - repeat no-repeat Value
Here is an example to set the repetition behavior of the background image, as repeat no-repeat:
<html> <head> <style> .repeat-no-repeat { background-image: url('images/smiley.png'); background-repeat: repeat no-repeat; width: 500px; height: 100px; border: 3px solid black; position: relative; } </style> </head> <body> <div class="repeat-no-repeat"></div> </body> </html>
To Continue Learning Please Login
Login with Google