CSS Background-repeat property enables you to set the repeat behavior of background-image. By default when you set the background image using CSS background-image property then it displays the image starting from the top-left corner of the browser window and tiles the image along both vertical and horizontal direction. CSS background-repeat property enables you to set the repeat layout of image along vertical direction only, or horizontal direction only or both directions.
CSS Background Examples:
You can see the live samples and examples of CSS Background Properties from the following links:
Syntax
background-repeat: [repeat-direction];
Examples
example 1:
background-repeat: repeat-x;
example 2:
background-repeat: repeat-y;
example 3:
background-repeat: repeat;
example 4:
background-repeat: no-repeat;
CSS background-repeat property works with other two properties i.e. background-image property on which repeat behavior is to be applied and background-position property to set the starting point for the repeat behavior of specified image.
CSS background-repeat property supports 4 types of values:
1. repeat-x: it repeats the background image in the horizontal direction i.e. x-axis.
2. repeat-y: it repeats the background image along the vertical direction i.e. y-axis.
3. repeat: it allows to repeat the image along both vertical and horizontal directions.
4. no-repeat: it does not allow to repeat the image in any of the direction. It sets only single appearance of background-image.
Continue next to learn the CSS background-position property with examples.
