CSS background-repeat Property

February 10, 2021 12:37 pm IST

You are Here:

CSS background-repeat Property

CSS background-repeat property sets how background images are repeated.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> body{ background-image: url("orange.png"); background-repeat: no-repeat; } </style> </head> <body> <h1>CSS background-repeat Property</h1> <p>CSS background-repeat to 'no-repeat'.</p> </body> </html>

Run

Syntax

Using CSS

element{ background-repeat: no-repeat; }

Using Javascript

object.style.backgroundRepeat="no-repeat";

Animatable

No, background-repeat property is not animatable. CSS Animatable Properties Reference.

Default Value

Default value for CSS background-repeat property is repeat.

Property Value

The following table provides a list of values for CSS background-repeat property.

Value	Explanation
repeat	Specifies the background image is repeated both vertically and horizontally.
repeat-x	Specifies the background image is repeated only in x-axis (horizontally).
repeat-y	Specifies the background image is repeated only in y-axis (vertically).
no-repeat	Specifies the background-image is not repeated.
space	Specifies the background-image is repeated as much as possible without clipping.
round	Specifies the background-image is repeated and squished or stretched to fill the space (no gaps).

Using repeat-x

In the following example, we will repeat the background-image only horizontally.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> body{ background-image: url("orange.png"); background-repeat: repeat-x; } </style> </head> <body> <h1>CSS background-repeat Property</h1> <p>CSS background-repeat to 'repeat-x'.</p> </body> </html>

Run

Using repeat-y

In the following example, we will repeat the background-image only vertically.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> body{ background-image: url("orange.png"); background-repeat: repeat-y; } </style> </head> <body> <h1>CSS background-repeat Property</h1> <p>CSS background-repeat to 'repeat-y'.</p> </body> </html>

Run

Using space

In the following example, we will repeat the background-image as much as possible without clipping.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> body{ background-image: url("orange.png"); background-repeat: space; } </style> </head> <body> <h1>CSS background-repeat Property</h1> <p>CSS background-repeat to 'space'.</p> </body> </html>

Run

Using round

In the following example, we will repeat and squish or stretch the background-image to fill the space (no gaps).

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> body{ background-image: url("orange.png"); background-repeat: round; } </style> </head> <body> <h1>CSS background-repeat Property</h1> <p>CSS background-repeat to 'round'.</p> </body> </html>

Run

Using JavaScript

In the following example, we will demonstrate how to change the CSS background-repeat property of an element using JavaScript.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> body{ background-image: url("orange.png"); } </style> </head> <body> <h1>CSS background-repeat Property</h1> <button onclick="myFunction()">Click Me</button> <script> var x = document.getElementsByTagName("body")[0]; function myFunction(){ x.style.backgroundRepeat = "no-repeat"; } </script> </body> </html>

Run