CSS Background Repeat
CSS
The background-repeat property specifies the direction of an image to repeat in the background.
CSS background-repeat property.
➔ By default, the background-image property repeats an image horizontally and vertically if it cannot cover the entire area of the element.
➔ The background-repeat property has three values for the repeating direction of an image in the background:
- repeat-x
- repeat-y
- no-repeat
➔ background-repeat: no-repeat; species that will not repeat the image even though it may not cover the entire area of the element.
Syntax
background-repeat: repeat | repeat-x | repeat-y | no-repeat | initial | inherit;
Property values
| Value | Description |
|---|---|
| repeat | The background image is repeated horizontally and vertically to fill the entire element's background area. The is default. |
| repeat-x | The image is repeated only along the horizontal (x) axis. |
| repeat-y | The image is repeated only along the vertical (y) axis. |
| no-repeat | The background image is displayed only once and does not repeat in any direction. |
| initial | Sets the property to its default value. |
| inherit | The element inherits the property value from its parent element. |
Example (repeat)
<body style="background-image:url('resources/images/flowers-rose2.png');background-repeat: repeat-x;">
<div style="border-radius: 5px; padding:10px;">
<h1>CSS background-image Example</h1>
<p>The CSS background property is used to set the background effect on the element.</p>
<p>The following are CSS background properties that affect HTML elements.</p>
</div>
</body>Click on the "Try it Now" button to see how it works.
Sample Code
Copy each file contents and paste it to your own project and run to see the final output
Example (no-repeat)
<body style="background-image:url('resources/images/flowers-gardenia.png');background-repeat: no-repeat;">
<div style="border-radius: 5px; padding:10px;">
<h1>CSS background-image Example</h1>
<p>The CSS background property is used to set the background effect on the element.</p>
<p>The following are CSS background properties that affect HTML elements.</p>
</div>
</body>Click on the "Try it Now" button to see how it works.
Note: The background image is repeated if it cannot cover the entire element.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS background-image Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="utf-8" />
<style>
body {
background-image: url('resources/images/mountains-m11.jpg');
background-repeat: no-repeat;
background-position: center;
}
div {
background-image: url('resources/images/flowers-hibiscus-t.png');
background-repeat: no-repeat;
background-position: center;
min-height: 230px;
border: 2px dashed white;
border-radius: 5px;
padding: 10px;
margin-top: 100px;
}
</style>
</head>
<body>
<div>
<h1>CSS background-image Example</h1>
<p>The CSS background property is used to set the background effect on the element.</p>
<p>The following are CSS background properties that affect HTML elements.</p>
</div>
</body>
</html>
Copy the code and click on the "Try it Now" button to see how it works.