CSS - background-repeat



The background-repeat property of CSS controls the repetition of images on a background. The image can be repeated along the horizontal and vertical axes, or not repeated.

The repeated images gets clipped as per the size of the element, but they can be resized such that they fit within the element, using round and space values for background-repeat property.

Possible Values

  • <repeat-style>: The values can be passed in a one-value or a two-value syntax format.

  • One-value syntax is a shorthand for two-value syntax. Following table shows the equivalent values of both the formats:

  • Sr.No One-Value Syntax Two-Value Syntax
    1 repeat-x repeat no-repeat
    2 repeat-y no-repeat repeat
    3 repeat repeat repeat
    4 space space space
    5 round round round
    6 no-repeat no-repeat no-repeat

In two-value syntax, the first value defines the horizontal repetition of the image and second value defines the vertical behavior. Each keyword is described in detail:

  • repeat: Image is repeated in order to fill the complete painting area. Image may be clipped to fit in the space.

  • space: Image is repeated as much as required, without clipping it. The white space is distributed evenly between the images and the first and last image is pinned to either side of the element.

  • round: Image gets stretched, if the space increases and if another image is added, they compress to accomodate it and fill up the space.

  • no-repeat: Image is set not to repeat.

Applies to

All the HTML elements.

DOM Syntax

object.style.backgroundRepeat = "repeat | no-repeat | space | round";

CSS background-repeat - repeat Value

Here is an example to set the repetition behavior of the background image, as repeat:

<html>
<head>
<style>  
   .repeat {
      background-image: url('images/tutimg.png');
      background-repeat: repeat;
      width: 800px;
      height: 400px;
      border: 3px solid black;
      position: relative;
   }
</style>
</head>
<body>
      <div class="repeat"></div>
</body>
</html>

CSS background-repeat - no-repeat Value

Here is an example to set the repetition behavior of the background image, as no-repeat:

<html>
<head>
<style>  
   .no-repeat {
      background-image: url('images/tutimg.png');
      background-repeat: no-repeat;
      width: 500px;
      height: 400px;
      border: 3px solid black;
      position: relative;
   }
</style>
</head>
<body>
      <div class="no-repeat"></div>
</body>
</html>

CSS background-repeat - repeat-x Value

Here is an example to set the repetition behavior of the background image, as repeat-x:

<html>
<head>
<style>  
   .repeat-x {
      background-image: url('images/tutimg.png');
      background-repeat: repeat-x;
      width: 800px;
      height: 300px;
      position: relative;
   }
</style>
</head>
<body>
   <div class="repeat-x"></div>
</body>
</html>

CSS background-repeat - repeat-y Value

Here is an example to set the repetition behavior of the background image, as repeat-y:

<html>
<head>
<style>  
   .repeat-y {
      background-image: url('images/tutimg.png');
      background-repeat: repeat-y;
      width: 800px;
      height: 300px;
      position: relative;
}
</style>
</head>
<body>
   <div class="repeat-y"></div>
</body>
</html>

CSS background-repeat - space Value

Here is an example to set the repetition behavior of the background image, as space:

<html>
<head>
<style>  
   .space {
      background-image: url('images/logo.png');
      background-repeat: space;
      width: 800px;
      height: 400px;
      border: 3px solid black;
      position: relative;
   }
</style>
</head>
<body>
    <div class="space"></div>
</body>
</html>

CSS background-repeat - round Value

Here is an example to set the repetition behavior of the background image, as round:

<html>
<head>
<style>  
   .round {
      background-image: url('images/tutimg.png');
      background-repeat: round;
      width: 800px;
      height: 400px;
      border: 3px solid black;
      position: relative;
   }
</style>
</head>
<body>
    <div class="round"></div>
</body>
</html>

CSS background-repeat - repeat no-repeat Value

Here is an example to set the repetition behavior of the background image, as repeat no-repeat:

<html>
<head>
<style>  
   .repeat-no-repeat {
      background-image: url('images/smiley.png');
      background-repeat: repeat no-repeat;
      width: 500px;
      height: 100px;
      border: 3px solid black;
      position: relative;
   }
</style>
</head>
<body>
    <div class="repeat-no-repeat"></div>
</body>
</html>
Advertisements