CSS Background Image Repeat Property

Last Updated Jul 21, 2015, 12:00:06 PM





CSS Background Image Repeat Property

Specifies how a background image will repeat itself within a box.
Values
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 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

Example
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 Properties

CSS 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