background-repeat
Published Jun 25, 2021Updated Sep 3, 2021
Contribute to Docs
Defines how the background image should be repeated if the image does not fully cover the element.
Syntax
Note: The default position will be in the top-left corner. It will repeat vertically and horizontally by default.
background-repeat: <value>;
Where <value>
can be the following: no-repeat
| repeat
| repeat-x
| repeat-y
| space
| round
| initial
| inherit
Example 1
Set background image to not repeat:
body {background-image: url('ocean.png');background-repeat: no-repeat;}
Example 2
Set star.gif
to repeat along x-axis:
body {background-image: url('star.gif'), url('space.png');background-repeat: repeat-x, no-repeat;}
Example 3
Evenly distribute star.gif
from the end of element:
body {background-image: url('star.gif'), url('night-sky.png');background-repeat: space, no-repeat;}
Example 4
Scale the star gif to fit the element:
body {background-image: url('star.gif'), url('night-sky.png');background-repeat: round, no-repeat;}
Looking to contribute?
- Learn more about how to get involved.
- Edit this page on GitHub to fix an error or make an improvement.
- Submit feedback to let us know how we can improve Docs.