CSS background-repeat Property

CSS background-repeat Property


CSS Background-repeat
If an element is larger than its background image, by default the image will be repeated to fill the element.
Syntax - 
background-repeat: repeat|repeat-x|repeat-y|no-repeat|initial|inherit;
Now we will see some property values -
repeat -    
 
The background image is repeated both vertically and horizontally, and this is a default value
 

repeat-x - 
 
 The background image is repeated only horizontally 
 
 
repeat-y - 
 
 The background image is repeated only vertically  
 
  
no-repeat -     
 
The background-image is not repeated.
 
space   - 
 
The background-image is repeated as much as possible without clipping. The first and last image is pinned to either side of the element, and whitespace is distributed evenly between the images 
 
 
round   - 
 
The background-image is repeated and squashed or stretched to fill the space without gaps
Now we will see Example -
Example - Using a background image on an element larger than the image itself
<style>
.background-image {
background-image: url(tiles.jpg);
height: 50rem;
width: 100rem;
}
</style>
<div class="background-image"></div>
Output -
Example - Disabling background repeat
<style>
.background-image {
background-color: #999999;
background-image: url('tiles.jpg');
background-repeat: no-repeat;
height: 50rem;
width: 100rem;
}
</style>
<div class="background-image"></div>
Output -
Example - Repeating the background vertically only
<style>
.background-image {
background-color: #999999;
background-image: url('tiles.jpg');
background-repeat: repeat-y;
height: 50rem;
width: 100rem;
}
</style>
<div class="background-image"></div>
Output -