CSS Background-repeat Property

Introduction:

This background-repeat property allows us to define how the image is repeated in the background of the web page. By default, the background image is repeated in vertical and horizontal directions in CSS.

Tips:

The position of the background image is as per the background-position property. If the developer does not define any position property, then by default, the image is always placed at the top left corner of the element.

CSS Background-repeat Syntax:

We can define the CSS background-repeat property with the below syntax.

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

In the above syntax:

1. Repeat:

This helps set the background image in a vertical or horizontal direction. It is the default value of CSS background-repeat.

2. Repeat-x:

With the help of this, the background image is repeated only in the horizontal direction.

3. Repeat-y:

With the help of this, the background image is repeated only in the vertical direction.

4. No-repeat:

With the help of this, the background image stops repeating itself on the web page.

5. Space:

This allows the background image to be repeated without clipping the border. Clipping means the white space is distributed evenly between all the repeated images.

6. Round:

This will repeat all the background images. Here, all the images are stretched to fill the white space available on the web page.

7. Initial:

With the help of this, we can set the default value of the background property.

8. Inherit:

With the help of this, the property value inherits from the parent element.

We will now see some examples to understand how this value works in the background-repeat property.

Example 1: (Repeat with background repeat):

In this example, the background images repeated with their default value of background-repeat property, i.e., in the vertical and horizontal directions. Let us understand this by taking an example.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>body {
  background-image: url("./JTP\ logo.png");
 
  /* default value */
  background-repeat: repeat;
 }</style>
</head>
<body>
 <h1>Welcome to javaTpoint</h1>
</body>
</html>

Output:

Explanation:

In the above code, we have used the background-repeat property as repeat.

Example 2: (Repeat-X with Background repeat)

In this example, we are going to set the background-repeat property as repeat-x.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>body {
  background-image: url("./JTP\ logo.png");
  
 /* repeats in horizontal direction */
  background-repeat: repeat-x;
 }</style>
</head>
<body>
 <h1>Welcome to javaTpoint</h1>
</body>
</html>

Output:

Explanation:

In the above code, we have used the background-repeat property as repeat-x.

Example 3: (No repeat with background property):

In this example, we are going to set the background-repeat property as no repeat.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>body {
  background-image: url("./JTP\ logo.png");
 
  /* stops images from repeating itself */
  background-repeat: no-repeat;
 }
  </style>
</head>
<body>
 <h1>Welcome to javaTpoint</h1>
</body>
</html>

Output:

Explanation:

In the above code, we have used the background-repeat property as no repeat.

NOTE: If the background image size is greater than the background area, it will not repair itself because the image is too large to fit in that small area.

Example 4: (Space with background repeat)

In this example, we are going to set the background-repeat property with space.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>body {
  height: 100vh;
  background-image: url("./JTP\ logo.png");
  background-repeat: space;
 } </style>
</head>
<body>
 <h1>Welcome to javaTpoint</h1>
</body>
</html>

Output:

Explanation:

In the above code, we have used the background-repeat property with space.

Example 5: (Round with background-repeat):

In this example, we are going to set the background-repeat property with a round.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
  body {
 height: 100vh;
 background-image: url("./JTP\ logo.png");
 background-repeat: round;
}
 </style>
</head>
<body>
 <h1>Welcome to javaTpoint</h1>
</body>
</html>

Explanation:

In the above code, we have used the background-repeat property with round.

Next TopicCSS Border Opacity

← prev next →