worldofitech
In this article, you will learn-
CSS Background Repeat
CSS background-repeat: By default, the background-image property repeats a picture both horizontally and vertically.
A few pictures ought to be repeated just horizontally or vertically, or they will look weird, similar to this:
CSS Backgrounds
The CSS background properties are used to add background effects for elements.
CSS background property is used to define the background effect on element.
Example
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("gradient_bg.png");
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>Strange background image...</p>
</body>
</html>
On the off chance that the picture above is repeated just horizontally (background-repeat: repeat-x;), the background will look better:
Example
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>Here, a background image is repeated only horizontally!</p>
</body>
</html>
Tip: To repeat a picture vertically, set background-repeat: repeat-y;
CSS background-repeat: no-repeat
Showing the background picture just once is likewise determined by the background-repeat property:
Example
Show the background image only once:
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
}
In the example over, the background picture is set in a similar spot as the text. We need to change the position of the picture, so that it doesn’t disturb the text too much.
CSS background-position
The background-position property is used to specify the position of the background picture.
Example
Position the background image in the top-right corner:
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}
Thanks for reading! We hope you found this tutorial helpful and we would love to hear your feedback in the Comments section below. And show us what you’ve learned by sharing your projects with us.
