CSS background image repeat:-
In this tutorial we will learn about the CSS background image property.
CSS background-repeat:-
By default the background-image property repeat an image both horizontally and vertically.
Some image can be repeat only horizontally and some can repeat only vertically.
<!DOCTYPE html>
<html>
<head>
<style>
/*here you can use you image in url*/
body{background-image: url("gradient_bg.png")}
</head>
<body>
<h1> CSS Background image repeat!</h1>
<p> We use the image that are repeating horizontally and vertically.</p>
</body>
</html>
Try this code for a better experience
NOTE:- If the image only repeat horizontally then use (background-repeat: repeat-x;), the background will look better.
<!DOCTYPE html>
<html>
<head>
<style>
/*here you can use you image in url*/
body{background-image: url("gradient_bg.png")
background-repeat: repeat-x;}
</head>
<body>
<h1> CSS Background image repeat!</h1>
<p>Here the background image will repeat only horizontally!</p>
</body>
</html>
Try this code for a better experience
NOTE:- If image will repeat vertically then use (background-repeat: repeat-y;).
<!DOCTYPE html>
<html>
<head>
<style>
/*here you can use you image in url*/
body{background-image: url(gradient_bg.png;)
background-repeat: repeat-y;
}
</head>
<body>
<h1> CSS Background image repeat!</h1>
<p> Here the image will repeat only vertically.</p>
</body>
</html>
Try this code for a better experience
CSS background-repeat: no-repeat:-
If you want to show the background image once then you have to use background-no repeat property.
<!DOCTYPE html>
<html>
<head>
<style>
/*here you can use you image in url*/
body{background-image: url("img_tree.png")
background-repeat: no repeat;
}
</style>
</head>
<body>
<h1> CSS background image repeat!</h1>
<p>The background image show only once but this disturbing the text.</p>
</body>
</html>
Try this code for a better experience
NOTE:- In above example the background image placed above the text that can not read the reader if we want to change the position of the image then we have to use background-position property for changing the position of the image.
<!DOCTYPE html>
<html>
<head>
<style>
body{background-image: url("img_tree.png")
background-repeat: no repeat;
background-position: right top;
margin-right: 200px;}
</style>
</head>
<body>
<h1> CSS background image position</h1>
<p> In this we use background image position for attractive layout and use no repeat image property for showing image only once.</p>
</body>
</html>
Try this code for a better experience
0 Comments