CSS background-repeat Property

CSS background-repeat property is used to specify whether the background image should repeat or not if it is smaller than the element’s size.

The background image in the below example repeats itself horizontally because its size is lower than the element’s horizontal size.

Example:

body{
  background-image: url('images/smile.png');
  background-repeat: repeat-x;
}

Similarly, a background image can repeat itself vertically if its size is lower than the element’s vertical size. See the example below:

Example:

body{
  background-image: url('images/smile.png');
  background-repeat: repeat-y;
}

If no value is specified to the background-repeat property, it will use the default value and the background image is repeated both horizontally and vertically. See the example below:

Example:

body{
  background-image: url('images/smile.png');
  /* No background-repeat property specified */
}

CSS Syntax

The background-repeat property has the following syntax:

background-repeat: repeat|repeat-x|repeat-y|space|round|no-repeat|initial|inherit;

Property Values

The background-repeat property accepts the following values:

repeatThe background image is repeated both horizontally and vertically. This is the default.
repeat-xThe background image is repeated only horizontally.
repeat-yThe background image is repeated only vertically.
spaceThe background image is repeated in such a way that no background image is clipped and the remaining space is evenly distributed between them.
roundThe background image is repeated in such a way that no background image is clipped and the image can shrink or stretch to cover the remaining space.
no-repeatThe background image is not repeated at all.
initialSets the background-repeat property to its default value(repeat).
inheritInherits the background-repeat property from the parent element.

General Info

Default Valuerepeat
InheritedNo
JavaScript Usageelement.style.backgroundRepeat = “repeat-x”

More Examples

If we set the background-repeat property to space, the background image is repeated in such a way that no background image is clipped and the remaining space is evenly distributed between them. See the example below:

Example:

body{
   background-image: url('images/smile.png');
   background-attachment: fixed;
   background-repeat: space;
}

If we set the background-repeat property to round, the background image is repeated in such a way that no background image is clipped and the image can shrink or stretch to cover the remaining space. See the example below:

Example:

body{
   background-image: url('images/smile.png');
   background-attachment: fixed;
   background-repeat: round;
}

Related Pages

CSS Tutorial: CSS Background

Author

  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.

    View all posts

Leave a Comment