Table of Contents
CSS Background-Repeat Property
- The background-repeat property sets how a background image repeation.
CSS Syntax→ background-repeat: repeat|repeat-x|repeat-y|no-repeat; repeat
- Repeat-The background image is repeated both vertically and horizontally. This is default
- Repeat-x-The background image is repeated only horizontally.
- Repeat-y-The background image is repeated only vertically.
- No-repeat-This property will only be shown once ,The background-image is not repeated.
Example Background Repeat
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("https://nielitbhu.com/new logo");
background-repeat: repeat;
}
</style>
</head>
<body>
<center><h1 style="color: red;">CSS Background-Repeat-repeat Property</h1>
<h2 style="color: red;">Hello Nielitbhu.com</h2>
</center>
</body>
</html>
Example Background Repeat-x
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("https://nielitbhu.com/new logo");
background-repeat: repeat-x;
}
</style>
</head>
<body>
<center><h1 style="color: red;">CSS Background-Repeat-x Property</h1>
<h2 style="color: red;">Hello Nielitbhu.com</h2>
</center>
</body>
</html>
Example Background Repeat-y
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("https://nielitbhu.com/new logo");
background-repeat: repeat-y;
}
</style>
</head>
<body>
<center><h1 style="color: red;">CSS Background-Repeat-y Property</h1>
<h2 style="color: red;">Hello Nielitbhu.com</h2>
</center>
</body>
</html>
Example Background Repeat-no repeat
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("https://nielitbhu.com/new logo");
background-repeat: no-repeat;
}
</style>
</head>
<body>
<center><h1 style="color: red;">CSS Background-Repeat-no repeat Property</h1>
<h2 style="color: red;">Hello Nielitbhu.com</h2>
</center>
</body>
</html>