CSS background-repeat property

Last update on August 19 2022 21:50:52 (UTC/GMT +8 hours)

background-repeat property

CSS background repeat property specifies whether a background image is repeated (titled) and how it is repeated.

Syntax:

background-repeat: repeat | repeat-x | repeat-y | no-repeat | inherit

Values

repeat : If specified, the background image is repeated both horizontally and vertically.

repeat-x : If specified, the background image is repeated horizontally only.

repeat-y : If specified, the background image is repeated vertically only.

no-repeat : If specified, the background image is not repeated.

inherit : If set, the associated element takes computed value of it's parent element's background-repeat property.

Initial values

repeat.

Applies to

background-repeat property can be applied to all HTML elements.

Inheritance

If no value specified, the background-repeat property does not get the computed value of its parent element.

Percentages

Not available.

Media

visual.

Computed value

As specified.

Browser compatibility

Browser	Version
Internet Explorer	4.0 and above
Firefox (Gecko)	1.0 and above
Opera	3.5 and above
Safari (WebKit)	1.0 and above

Example of background-repeat property when value="repeat-x"

This example shows how to repeat a background image horizontally

CSS code:

p {background-image: url('repeat-x.gif'); background-repeat: repeat-x}

HTML code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Example of background-repeat property when value="repeat-x" | w3resource</title>
<link rel="stylesheet" type="text/css" media="screen,projection" href="example-of-background-repeat-property-when-value-repeat-x.css">
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget luctus lacus. Praesent faucibus, odio nec convallis fermentum, magna augue pharetra urna, ut laoreet augue risus bibendum tellus. Donec pretium molestie vulputate. Morbi rutrum, sem eget porta varius, nibh mauris ornare neque, eu viverra risus tellus ut erat. In risus quam, egestas vel aliquet et, vulputate ut eros. Nam hendrerit auctor tortor. Nullam ut commodo magna. Etiam tincidunt risus ut tellus malesuada eget commodo dui congue. Donec interdum tempus nunc sollicitudin molestie. Aenean auctor hendrerit volutpat. Cras rutrum pretium sapien quis suscipit. Sed faucibus tincidunt sapien ac scelerisque. Donec pulvinar interdum augue, id facilisis dui commodo id.</p>
</body>
</html>

View this example in a separate browser window

Example of background-repeat property when value="repeat-x".

Example of background-repeat property when value="repeat-y"

This example shows how to repeat a background image vertically

CSS code:

p {background-image: url('repeat-y.gif'); background-repeat: repeat-y}

HTML code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Example of background-repeat property when value="repeat-y" | w3resource</title>
<link rel="stylesheet" type="text/css" media="screen,projection" href="example-of-background-repeat-property-when-value-repeat-y.css">
</head>
<body>
<p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget luctus lacus. Praesent faucibus, odio nec convallis fermentum, magna augue pharetra urna, ut laoreet augue risus bibendum tellus. Donec pretium molestie vulputate. Morbi rutrum, sem eget porta varius, nibh mauris ornare neque, eu viverra risus tellus ut erat. In risus quam, egestas vel aliquet et, vulputate ut eros. Nam hendrerit auctor tortor. Nullam ut commodo magna. Etiam tincidunt risus ut tellus malesuada eget commodo dui congue. Donec interdum tempus nunc sollicitudin molestie. Aenean auctor hendrerit volutpat. Cras rutrum pretium sapien quis suscipit. Sed faucibus tincidunt sapien ac scelerisque. Donec pulvinar interdum augue, id facilisis dui commodo id.</span></p>
</body>
</html>

View this example in a separate browser window

Example of background-repeat property when value="repeat-y".

Example of background-repeat property when value="no-repeat"

This example shows how to stop a background image from repeating

CSS code:

body{
background-image: url(w3r.gif);
background-repeat: no-repeat;
}

HTML code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Example of background-repeat property when value="no-repeat" | w3resource</title>
<link rel="stylesheet" type="text/css" media="screen,projection" href="example-of-background-repeat-property-when-value-no-repeat.css">
</head>
<body>
<h1>Learn web development</h1>
</body>
</html>

View this example in a separate browser window

Example of background-repeat property when value="no-repeat".

CSS background-repeat property

background-repeat property

See also