Loading Please Wait...
CSS background-repeat property is used to define how background images are repeated. Background images are repeated horizontally, vertically, both directions, or not repeated at all.
The background-repeat property can have following values:
repeat-x: background image is repeated horizontally as much as needed to cover the entire element and clipped if no space available.
repeat-y: background image is repeated vertically as much as needed to cover the entire element and clipped if no space available.
repeat: background image is repeated in both directions as much as needed to cover the entire element and clipped if no space available.
space: background images repeated in both directions. Images are placed in the border and then all images are placed in between, whitespace is place between them without clipping.
round: background images repeated in both directions. Images are placed in the border and then all images are placed in between, images are stretch to fill the gap without clipping.
no-repeat: background images are not repeated at all.
inherit: inherit from parent.
initial: initial as browser default.
revert: same as it would be if no changes were made.
revert-layer: same as back to the previous value.
unset: same as parent (like inherit) and if not inherited then back to browser default (like initial).
background-repeat: repeat-x;
background-repeat: repeat-x repeat-y;
| Single Value | Double Value |
|---|---|
| repeat-x | repeat no-repeat |
| repeat-y | no-repeat repeat |
| repeat | repeat repeat |
| space | space space |
| round | round round |
| no-repeat | no-repeat no-repeat |
/* Single Value */
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: repeat;
background-repeat: space;
background-repeat: round;
background-repeat: no-repeat;
/* Double Values: (horizontal vertical) */
background-repeat: repeat space;
background-repeat: repeat repeat;
background-repeat: round space;
background-repeat: no-repeat round;
/* Global keyword value */
background-repeat: inherit;
background-repeat: initial;
background-repeat: revert;
background-repeat: revert-layer;
background-repeat: unset;
We can also define multiple background repeat with multiple background images.
background-image: url("image1.png"), url("image2.png");
background-repeat: repeat-x, round;
How you feel about this blog:
Share this blog on:
If you find any error in the turtorials, or want to share your suggestion/feedback, feel free to send us email at: info@lynxsia.com
Contact Us
We are concern with various development process like website design & development, E-commerce development, Software development, Application development, SMS & Bulk SMS Provider, PWA Development, and many more..
Copyright © , Lynxsia IT Solutions, All rights reserved