CSS Background Repeat


In CSS, the background-repeat property specifies how a background image should be repeated.
A background-image by default, is repeated both vertically and horizontally. By default, the image is always placed at the element's top left corner if no background-position is specified.

Syntax:


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


  • repeat: Repeat is a default value and with this, the background image is repeated both vertically and horizontally. Extra image will be clipped if it does not fit.
  • repeat-x: The background image is repeated horizontally only, i.e. along the x-axis.
  • repeat-y: The background image is repeated vertically only, i.e. along the y-axis.
  • no-repeat: Just as the name suggests, the background image will be shown only once and not repeated.
  • initial: This sets the property's value to its default.
  • inherit: This specifies that the property should inherit the value from its parent element.

For example:


<!DOCTYPE html>
<html>
<head>
<style>
body  {
  background-image: url("cat.jpg");
  background-color: #cccccc;
  background-repeat: repeat-x;
}
</style>
</head>
<body>
<h1>The background-repeat Property</h1>
<p>this will be repeated horizontally</p>
</body>
</html>
Live Demo!


Output:

The background-repeat Property

this will be repeated horizontally



In the above example, a background image paper.png is used and the repeat-x value is used in the repeat property, which will make the background image to be repeated only horizontally. If in case the background image is not found, the background color will be displayed instead.