CSS Reference
CSS Reference CSS Selectors CSS Reference Aural CSS Web Safe Fonts CSS Units CSS Colors CSS Color Values CSS Color Names CSS Color HEX CSS3 Browser SupportCSS Properties
CSS background-repeat Property
Example
Repeat a background-image only vertically:
body
{
background-image:url('paper.gif');
background-repeat:repeat-y;
}
{
background-image:url('paper.gif');
background-repeat:repeat-y;
}
Try it yourself »
Definition and Usage
The background-repeat property sets if/how a background image will be repeated.
By default, a background-image is repeated both vertically and horizontally.
| Default value: | repeat |
|---|---|
| Inherited: | no |
| Version: | CSS1 |
| JavaScript syntax: | object.style.backgroundRepeat="repeat-y" |
Browser Support
The background-repeat property is supported in all major browsers.
Note: The value "inherit" is not supported in IE7 and earlier. IE8 requires a !DOCTYPE. IE9 supports "inherit".
Tips and Notes
Tip: The background image is placed according to the background-position property. If no background-position is specified, the image is always placed at the element�s top left corner.
Property Values
| Value | Description | Play it |
|---|---|---|
| repeat | The background image will be repeated both vertically and horizontally. This is default | Play it » |
| repeat-x | The background image will be repeated only horizontally | Play it » |
| repeat-y | The background image will be repeated only vertically | Play it » |
| no-repeat | The background-image will not be repeated | Play it » |
| inherit | Specifies that the setting of the background-repeat property should be inherited from the parent element |
Try it Yourself - Examples
How to
repeat a background image both vertically and horizontally
This example demonstrates how to repeat a background image both vertically and
horizontally.
How to
repeat a background image only horizontally
This example demonstrates how to repeat a background image only horizontally.
How to display a background image only one time
This example demonstrates how to display a background image only one time, with
no-repeat
Related Pages
CSS tutorial: CSS Background
CSS reference: background-position property
HTML DOM reference: backgroundRepeat property
Your suggestion:
Close [X]
Thank You For Helping Us!
Your message has been sent to W3Schools.
Close [X]
