Background repeat and no-repeat in css
Background repeat in css:
<!DOCTYPE html><html>
<head>
<style>
body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
// we can give repeat-y for aligning in y axis
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>Here, a background image is repeated only horizontally!</p>
</body>
</html>
No Repeat in css:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>W3Schools background image example.</p>
<p>The background image is only showing once, but it is disturbing the reader!</p>
</body>
</html>
Comments
Post a Comment