CSS background-repeat

Please Share On:

Definition:

CSS background-repeat property sets how background images are repeated. By default, a background image is repeated both horizontally and vertically. But this background repeated image can be controlled by using background-repeated property values and displays as you want.

Property Values are:

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

Syntax:

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

Let use the following image to set as a background-repeat with above each property values with example.

Lets have a look in detail by applying each background-repeat property values.

Here is an image that I am going to use for each background-repeat values listed above.

1) background-repeat: repeat;

Defination:

background-repeat: repeat is a default property value that repeated a background image both horizontally and vertically.

Syntax:

background-repeat: repeat;

Source Code:

<!DOCTYPE html>
<html>
<head>
<style>
#background-repeat{
  background-image: url('http://www.elsebazaar.com/blog/wp-content/uploads/2020/03/Tutorial.png');
  border: 10px dashed red;
  padding: 10px;
  background-origin: padding-box;
  background-repeat: repeat;
}

.text{
   padding-top: 100px;
}

</style>
</head>
<body>

<div id="background-repeat">
<h3>background-repeat: repeat;</h3>
  <p class="text"> Here is an example of image with background-repeat's property value is repeat.</p>
</div>

</body>
</html>

Output:


2. background-repeat: repeat-x;

Definition:

Repeat-x sets the background image repeated horizontally only.

Syntax:

background-repeat: repeat-x;

Source Code:

<!DOCTYPE html>
<html>
<head>
<style>
#background-repeat-x{
  background-image: url('http://www.elsebazaar.com/blog/wp-content/uploads/2020/03/Tutorial.png');
  border: 10px dashed red;
  padding: 10px;
  background-origin: padding-box;
  background-repeat: repeat-x;
}

.text{
   padding-top: 100px;
}

</style>
</head>
<body>

<div id="background-repeat-x">
<h3>background-repeat: repeat-x;</h3>
  <p class="text"> Here is an example of image with background-repeat's property value is repeat-x.</p>
</div>

</body>
</html>

Output:


3. background-repeat: repeat-y;

Definition:

Repeat-y sets the background image repeated vertically only.

Syntax:

background-repeat: repeat-y;

Source Code:

<!DOCTYPE html>
<html>
<head>
<style>
#background-repeat-y{
  background-image: url('http://www.elsebazaar.com/blog/wp-content/uploads/2020/03/Tutorial.png');
  border: 10px dashed red;
  padding: 10px;
  background-origin: padding-box;
  background-repeat: repeat-y;
}

.text{
   padding-top: 100px;
}

</style>
</head>
<body>

<div id="background-repeat-y">
<h3>background-repeat: repeat-y;</h3>
  <p class="text"> Here is an example of image with background-repeat's property value is repeat-y.</p>
</div>

</body>
</html>

Output:


4. background-repeat: no-repeat;

Definition:

no-repeat property shows the background-image property value only once and it doesn’t repeat the background image.

See below with examples.

Syntax:

background-repeat: no-repeat;

Source Code:

<!DOCTYPE html>
<html>
<head>
<style>
#background-no-repeat{
  background-image: url('http://www.elsebazaar.com/blog/wp-content/uploads/2020/03/Tutorial.png');
  border: 10px dashed red;
  padding: 10px;
  background-origin: padding-box;
  background-repeat: no-repeat;
}

.text{
   padding-top: 20px;
}

</style>
</head>
<body>

<div id="background-no-repeat">
<h3>background-repeat: no-repeat;</h3>
  <p class="text"> Here is an example of image with background-repeat's property value is no-repeat.</p>
</div>

</body>
</html>

Output:


5. background-repeat: space;

Definition:

The background image is repeated as much as possible with an evenly distributed blank space between images.

Syntax:

background-repeat: space;

Source Code:

<!DOCTYPE html>
<html>
<head>
<style>
#background-repeat{
  background-image: url('http://www.elsebazaar.com/blog/wp-content/uploads/2020/03/Tutorial.png');
  border: 10px dashed red;
  padding: 10px;
  background-origin: padding-box;
  background-repeat: space;
}

.text{
   padding-top: 20px;
}

</style>
</head>
<body>

<div id="background-repeat">
<h3>background-repeat: space;</h3>
  <p class="text"> Here is an example of image with background-repeat's property value is space.</p>
</div>

</body>
</html>

Output:


6. background-repeat: round;

Definition:

The background image is repeated without having space.

Syntax:

background-repeat: round;

Source Code:

<!DOCTYPE html>
<html>
<head>
<style>
#background-repeat{
  background-image: url('http://www.elsebazaar.com/blog/wp-content/uploads/2020/03/Tutorial.png');
  border: 10px dashed red;
  padding: 10px;
  background-origin: padding-box;
  background-repeat: round;
}

.text{
   padding-top: 20px;
}

</style>
</head>
<body>

<div id="background-repeat">
<h3>background-repeat: round;</h3>
  <p class="text"> Here is an example of image with background-repeat's property value is round.</p>
</div>

</body>
</html>

Output:


7. background-repeat: initial;

Definition:

Initial value sets the background-repeat into default value.

Syntax:

background-repeat: initial;

Source Code:

<!DOCTYPE html>
<html>
<head>
<style>
#background-repeat{
  background-image: url('http://www.elsebazaar.com/blog/wp-content/uploads/2020/03/Tutorial.png');
  border: 10px dashed red;
  padding: 10px;
  background-origin: padding-box;
  background-repeat: initial;
}

.text{
   padding-top: 20px;
}

</style>
</head>
<body>

<div id="background-repeat">
<h3>background-repeat: initial;</h3>
  <p class="text"> Here is an example of image with background-repeat's property value is initial.</p>
</div>

</body>
</html>

Output:


8. background-repeat: inherit;

Definition:

inherit property inherit the background image from its parent elements.

Syntax:

background-repeat: inherit;

Source Code:

<!DOCTYPE html>
<html>
<head>
<style>
#background-repeat{
  background-image: url('http://www.elsebazaar.com/blog/wp-content/uploads/2020/03/Tutorial.png');
  border: 10px dashed red;
  padding: 10px;
  background-origin: padding-box;
  background-repeat: inherit;
}

.text{
   padding-top: 20px;
}

</style>
</head>
<body>

<div id="background-repeat">
<h3>background-repeat: inherit;</h3>
  <p class="text"> Here is an example of image with background-repeat's property value is inherit.</p>
</div>

</body>
</html>

Output:


Donate to support writers.



You may be interested in the following topics:

Leave a Reply

Your email address will not be published. Required fields are marked *

Copyright @2023. All Right Reserved.


Social media & sharing icons powered by UltimatelySocial