Background-repeat property

Category: Web Development & Approved by devanshchakravarti83@gmail.com On January-24-2021 15:17:35

Background Repeat Property



The background-repeat property is used to repeat the background images along horizontal and vertical axes or not in any direction.

The syntax for background-repeat property is:
background-repeat: <repeat-style>;

Values description:

  • repeat
    The image is going to repeat and will cover the background area, if end image doesn’t fit then it will be clipped.

  • no-repeat
    The image is not going to repeat so background area will not be covered.

  • space
    The image will repeat with some whitespace between them, image doesn’t get clip as starting and ending image get pin and then whitespace is distributed evenly.

  • round
    The image will repeat without getting clip. Repeated images are only added if the left space is more than or equal to the width of the image otherwise they get stretch.


You can use One-value over Two-value which are shorthand. In Two-value the first value repeats along horizontal and second one along vertical.
Two-value                  One-value
repeat repeat             repeat
repeat no-repeat        repeat-x
no-repeat repeat        repeat-y
no-repeat no-repeat no-repeat
space space               space
round round              round

Let see a syntax for all values of background-repeat property.
Example:
“Global value”
background-repeat: intital;
background-repeat: inherit;
background-repeat: unset;
“Keyword Value”
background-repeat: no-repeat;
background-repeat: repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: space;
background-repeat: round;
“Two Value “
background-repeat: repeat repeat;
background-repeat: repeat no-repeat;
background-repeat: space repeat;
background-repeat: repeat round;


Code Example:



We have made blog on CSS tutorial from basic, if you haven’t read them so Click Here


Comments

Share your thoughts about this post
web counter