background-repeat
Anonymous contributor
Published Jun 25, 2021Updated Nov 14, 2023
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;}
Contribute to Docs
- 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.
Learn CSS on Codecademy
- Career path
Front-End Engineer
Front-end engineers work closely with designers to make websites beautiful, functional, and fast.Includes 34 CoursesWith Professional CertificationBeginner Friendly115 hours - Career path
Full-Stack Engineer
A full-stack engineer can get a project done from start to finish, back-end to front-end.Includes 51 CoursesWith Professional CertificationBeginner Friendly150 hours - Free course
Learn CSS
In this CSS tutorial, you’ll learn how to add CSS to visually transform HTML into eye-catching sites.Beginner Friendly6 hours