CSS background-repeat Property

Description

The background-repeat CSS property is used to control how a background image is repeated within its containing element. It allows web designers to specify whether the background image should be repeated both horizontally and vertically, only horizontally, only vertically, or not at all. This property is essential for creating visually pleasing and responsive web designs, as it helps ensure that background images are displayed appropriately, whether for small elements or large sections of a webpage. By defining the repetition behavior, designers can achieve various visual effects and optimize the use of background images to enhance the overall user experience.

Initial value

repeat

Applies to

All elements

Inherited

No

Computed value

A list, each item consisting of: two keywords, one per dimension

Animatable

No

JavaScript syntax

object.style.backgroundRepeat

Interactive Demo

background-repeat: repeat-x;

background-repeat: repeat;

background-repeat: space;

background-repeat: round;

background-repeat: no-repeat;

background-repeat: space repeat;

Syntax

background-repeat: <repeat-style> [ , <repeat-style> ]* 

Values

• 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

Example

<div style="height:1000"> </div>

body { 
   background-image: url(images/icon2.png); 
   background-position: right; 
   background-repeat: repeat-y; 
}

Browser Support

The following table will show you the current browser support for the CSS background-repeat property.

Desktop
12	1	1	3.5	1

Tablets / Mobile
18	4	10.1	1	1	4.4

Last updated by CSSPortal on: 1st January 2024