Background image’s repeat property repeats image on the page.
body
{
background-image:url("Tasks_OK.png");
background-repeat: no-repeat;
}
Background image repeat property has following values.
Value | Description |
---|---|
repeat | Repeats image to the whole page. |
repeat-x | Repeats image only horizontally. |
repeat-y | Repeats image only vertically. |
no-repeat | Image placed once on the page. Image does not repeat. |
Example:
body
{
background-image:url("Tasks_OK.png");
background-repeat: repeat-y;
margin-left:50px;
}
<!DOCTYPE HTML>
<html>
<head>
<title> CSS Background Image repeat</title>
<style type="text/css">
.bckgrndColor {
background-color:Yellow; color:Black;
}
body {
background-image:url("Tasks_OK.png");
background-repeat: repeat-y;
margin-left:50px;
}
div {
background-color:Blue;color:White;
}
</style>
</head>
<body>
<div>
<h1>Zap Food and Gas</h1>
<h2>138 First Street, CA 94539</h2>
</div>
<hr>
<h3 class="bckgrndColor">Our Mission:-</h3>
<p >The mission of Zap Food and Gas is to offer great food and competitive gas price.</p>
<h3 class="bckgrndColor">Our Commitment:-</h3>
<p>Our commitment to serving you as our customer is at the heart of everything we do. It is our purpose to serve you as our customer
with the highest-quality foodservice products and other services.</p>
</body>
</html>
Result: