CSS - background-repeat


Advertisements


Description

background-repeat defines the directions in which a background image will be repeated (if any).

Possible Values

  • repeat − Causes the background image to be repeated along both the horizontal and vertical axes.

  • repeat-x − Causes the background image to be repeated along the x axis.

  • repeat-y − Causes the background image to be repeated along the y axis.

  • no-repeat − Prevents the background image from being repeated at all.

Applies to

All the HTML elements.

DOM Syntax

object.style.backgroundRepeat = "Any of the above values";

Example

Following is the example which demonstrates how to repeat the background image if image is small. You can use no-repeat value for background-repeat property if you don't want to repeat an image, in this case image will display only once.

By default background-repeat property will have repeat value.

<html>
   <head>
      <style>
         body {
            background-image: url("/css/images/css.jpg");
            background-repeat: repeat;
         }
      </style>
   </head>
   <body>
      <p>Tutorials point</p>
   </body>
</html>

It will produce the following result −

Following is the example which demonstrates how to repeat the background image vertically.

<html>
   <head>
      <style>
         body {
            background-image: url("/css/images/css.jpg");
            background-repeat: repeat-y;
         }
      </style>
   </head>
   <body>
      <p>Tutorials point</>
   </body>
</html>

It will produce the following result −

Following is the example which demonstrates how to repeat the background image horizontally.

<html>
   <head>
      <style>
         body {
            background-image: url("/css/images/css.jpg");
            background-repeat: repeat-y;
         }
      </style>
   </head>
   <body>
      <p>Tutorials point</>
   </body>
</html>

It will produce the following result −