CSS Solid

Background image repeat

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:

  • Set background image to the HTML body.
  • Repeat image horizontally.
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: