CSS Background Image Repeat Property
Last Updated Jul 21, 2015, 12:00:06 PM
CSS Background Image Repeat Property
none
Is a keyword denoting the absence of images.
<image>
Is an <image> denoting the image to display. There can be several of them, separated by commas, as multiple backgrounds are supported.
CSS Background-repeat Property
Specifies how a background image will repeat itself within a box.
Possible Valuesinherit
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
Watch GIF Try It Now
You 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.0 (1.7 or earlier)[1] | 3.5 | 4.0 | Yes | Yes |
| Multiple backgrounds | 1.0 | 1.3 | 3.6 (1.9.2) | yes | 9.0 | Yes | Yes |
| Gradients | 1.0 | 4.0 | 3.6 (1.9.2) | 11+ | 10 | yes | yes |
| SVG images | 8.0 | 5.0 [2] | 4.0 (2.0) | 9.5 | 9.0 | Not supported | yes |
| element | ? | Not supported | (Yes) | 9.5 | Not supported | Not supported | yes |
| image-rect | Not supported | Not supported | (Yes) | Not supported | Not supported | Not supported | yes |
Other CSS Background Properties you might want to Learn
CSS Background Color PropertiesCSS Background Repeat 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
