CSS background-repeat Property

The background-repeat property defines how background images are repeated. A background image can be repeated along the horizontal axis, the vertical axis, both, or not repeated at all.

Formal syntax: <repeat-style> [ , <repeat-style> ]* 

background-repeat: repeat-y;
background-repeat: repeat-x;
background-repeat: repeat;
background-repeat: no-repeat;
background-repeat: space;
background-repeat: round;

• repeatThe image is repeated horizontally and vertically. In CSS3, if two keywords are used, the image is repeated along the relevant axis.
• repeat-xThe image is repeated along the horizontal axis.
• repeat-yThe image is repeated along the vertical axis.
• no-repeatThe image is not repeated.
• spaceThe image is repeated as often as will fit into the background area a whole number of times, and is spaced out so that the first and last ones touch the edges. (CSS3)
• roundThe image is repeated as often as will fit into the background area, and is rescaled if necessary to make it fit a whole number of times. (CSS3)
• inherit

.class {
   background-image: url(/img/myimage.jpg);
   background-repeat: no-repeat;
   background-position: 30% 80%;
}

Click the button below to experiment with this property.

Give it a Try!

1+

6+

1+

1+

8+

• Share on Facebook
• Share on Twitter
• Share on Google+