CSS background-repeat

robgmerrill's avatar
robgmerrill's avatar
robgmerrill
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.

  • Career path

    Front-End Engineer

    Front-end engineers work closely with designers to make websites beautiful, functional, and fast.
    • Includes 34 Courses
    • With Professional Certification
    • Beginner Friendly.
      115 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 Courses
    • With Professional Certification
    • Beginner Friendly.
      150 hours

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;
}

A background image of an ocean that is not repeated

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;
}

Star gif repeated across the x-axis

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;
}

Star gif repeated evenly across x-axis without cropping

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;
}

Star gif stretched and repeated to fit element

All contributors

Contribute to 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 Courses
    • With Professional Certification
    • Beginner Friendly.
      115 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 Courses
    • With Professional Certification
    • Beginner Friendly.
      150 hours