Introduction:
This background-repeat attribute enables us to specify the repetition pattern of an image in the background of a webpage. By default, the background image is tiled both vertically and horizontally in CSS.
Tips:
The placement of the background image is determined by the background-position attribute. In cases where a specific position is not specified by the developer, the image will automatically be positioned at the top left corner of the element.
CSS Background-repeat Syntax:
We can specify the CSS background-repeat property using the syntax provided below.
background-repeat: repeat | repeat-x | repeat-y | no-repeat | space | round | initial | inherit;
In the above syntax:
- Repeat:
This property assists in positioning the background image either vertically or horizontally. It represents the default setting for the background-repeat property in CSS.
- : Repeat-x:
By utilizing this property, the background image will repeat solely along the horizontal axis.
- Repeat-y:
With this property, the background image is replicated solely vertically.
- No-repeat:
With the help of this, the background image stops repeating itself on the web page.
- Space:
This enables the background image to repeat seamlessly without cutting off at the border. Clipping ensures that the extra space is evenly distributed among all the replicated images.
- Round:
This will cause all background images to be duplicated. In this case, each image is expanded to occupy the entire empty area on the webpage.
- Commence:
With this feature, we have the ability to define the default value for the background property.
- Inherit:
By utilizing this feature, the value of the property is inherited from its parent element.
We will now explore some examples to grasp the functionality of this value within 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 C# Programming</h1>
</body>
</html>
Output:
Explanation:
In the preceding code snippet, we employed the background-repeat property with a value of 'repeat'.
Example 2: (Repeat-X with Background repeat)
In this instance, we will assign the background-repeat attribute to repeat horizontally.
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 C# Programming</h1>
</body>
</html>
Output:
Explanation:
In the aforementioned code snippet, the background-repeat property has been utilized with the value of repeat-x.
Example 3: (No repeat with background property):
In this instance, we will be configuring the background-repeat property to not 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 C# Programming</h1>
</body>
</html>
Output:
Explanation:
In the preceding code snippet, the background-repeat attribute has been employed with a value of 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 instance, we will establish the background-repeat attribute using the space value.
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 C# Programming</h1>
</body>
</html>
Output:
Explanation:
In the preceding code snippet, the background-repeat attribute has been applied with the value of space.
Example 5: (Round with background-repeat):
In this instance, we will configure the background-repeat attribute to utilize a circular pattern.
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 C# Programming</h1>
</body>
</html>
Explanation:
In the preceding code snippet, the background-repeat attribute is employed with the value of round.