background-repeat

christian.dinh2481 total contributions
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;}
All contributors
- christian.dinh2481 total contributions
- Anonymous contributorAnonymous contributor3077 total contributions
- robgmerrill124 total contributions
- christian.dinh
- Anonymous contributor
- robgmerrill
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.