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.
Example
<body style="background-image:url('resources/images/mountain.jpg');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
<body style="background-image:url('resources/images/mountain.jpg');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.