CSS Background Image repeat Property
Last Updated Jul 21, 2015, 12:00:06 PM
CSS Background Image repeat Property
background-repeat property defines how background images are repeated. A background image can be repeated along the horizontal axis, the vertical axis, both axes, or not repeated at all.
Specifies how a background image will repeat itself within a box.
By default, the repeated images are clipped to the size of the element, but they can be scaled to fit (using round) or evenly distributed from end to end (using space).
Definition and Usage
| Initial Value | repeat |
| Applies to | all elements. It also applies to ::first-letter and ::first-line. |
| Inherited | no |
| Media | Visual |
| Computed Value | a list, each item consisting of two keywords, one per dimension |
| Animatable | no |
| Canonical Order | The unique non-ambiguous order defined by the formal grammer |
Possible Values
inherit
repeat (default) - tiled, repeating the image both horizontally and vertically.
repeat-x - repeating the image horizontally only.
repeat-y - repeating the image vertically only.
no-repeat - not repeating the image at all, showing just one instance.
The default value for background-repeat is "repeat."
The background image is repeated both vertically and horizontally
so that it covers the entire background image painting area.
Now, if we only want the image to repeat horizontally on the X axis,
we could use the value "repeat x"
The value "repeat y" repeats the image vertically on the Y axis.
Let's look at an example of how we can change the css background with the
background-image and background-repeat property
CSS Background Image repeat Example
Watch GIF Try It NowYou can also repeat the background image both vertically and horizontally as well
CSS Background Image repeat Horizontally Example
To repeat the css background-image horizontally you need to specify background-reapt property as repeat-x like this: background-repeat: repeat-x;
Watch GIF
Try It Now
CSS Background Image repeat Vertically Example
To repeat the css background-image vertically you need to specify background-reapt property as repeat-y like this: background-repeat: repeat-y;
Watch GIF
Try It Now
If we do not want our background images to repeat or tile,
we'll need to use the value "no repeat" like this background-repeat: no-repeat;
no repeat places the image once in the top left corner
and it does not repeat it in any direction.
Watch GIF Try It Now
Browser compatibility
| Feature | |||||||
|---|---|---|---|---|---|---|---|
| Basic support | 1.0 | 1.0 (1.7 or earlier) | 1.0 (85) | 3.5 | 4.0 | ? | ? |
| Multiple backgrounds | 1.0 | 1.3 (312) | 3.6 (1.9.2) | 10.5 | 9.0 | ? | ? |
| round and space keywords | Not supported | Not supported | Not supported | 10.5 | 9.0 | ? | ? |
Practice with Our Interactive Live Editors and Take your CSS Skills to the next level
Example 1 Example 2 Example 3Other CSS Background Properties you might want to Learn
CSS Background Color PropertiesCSS Background Image Property
CSS Background Attachment Property
CSS Background Properties
Sources and Credits
The source of the content has been referred and updated with Mozilla Foundation and W3C Organization
Last Updated Jul 21, 2015, 12:00:06 PM
