Tóm Tắt
CSS
background-repeat
Property
Example
Repeat a background-image only vertically:
body
{
background-image: url(“paper.gif”);
background-repeat: repeat-y;
}
Try it Yourself »
More “Try it Yourself” examples below.
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.
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.
Show demo ❯
Default value:
repeat
Inherited:
no
Animatable:
no. Read about animatable
Version:
CSS1
JavaScript syntax:
object.style.backgroundRepeat=”repeat-x”
Try it
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
Property
background-repeat
1.0
4.0
1.0
1.0
3.5
Note: IE8 and earlier do not support multiple background images
on one element.
CSS Syntax
background-repeat: repeat|repeat-x|repeat-y|no-repeat|initial|inherit;
Property Values
Value
Description
Demo
repeat
The background image is repeated both vertically and
horizontally. The last image will be clipped if it does not fit. This is default
Demo ❯
repeat-x
The background image is repeated only horizontally
Demo ❯
repeat-y
The background image is repeated only vertically
Demo ❯
no-repeat
The background-image is not repeated. The image will only be shown
once
Demo ❯
space
The background-image is repeated as much as possible without clipping.
The first and last image is pinned to either side of the element, and
whitespace is distributed evenly between the images
Demo ❯
round
The background-image is repeated and squished or stretched to fill the
space (no gaps)
Demo ❯
initial
Sets this property to its default value. Read about initial
inherit
Inherits this property from its parent element. Read about inherit
More Examples
Example
Repeat a background image both vertically and horizontally (this is default):
body
{
background-image: url(“paper.gif”);
background-repeat: repeat;
}
Try it Yourself »
Example
Repeat a background image only horizontally:
body
{
background-image: url(“paper.gif”);
background-repeat: repeat-x;
}
Try it Yourself »
Example
Do not repeat a background image. The image will only be shown once:
body
{
background-image: url(“paper.gif”);
background-repeat: no-repeat;
}
Try it Yourself »
Example
Using background-repeat: space and background-repeat: round:
#example2 {
border: 2px solid black;
padding: 25px;
background: url(“w3css.gif”);
background-repeat: space;
}
#example3 {
border: 1px solid black;
padding: 25px;
background: url(“w3css.gif”);
background-repeat: round;
}
Try it Yourself »
Example
Use different background properties to create a “hero” image:
.hero-image {
background-image: url(“photographer.jpg”); /* The
image used */
background-color: #cccccc; /* Used if the image is
unavailable */
height: 500px; /* You must set a specified height */
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container */
}
Try it Yourself »
Related Pages
CSS tutorial: CSS Background
CSS reference: background-position
property
HTML DOM reference:
backgroundRepeat property