Background repeat Property
By default the background image property repeats the image both horizontally and vertically.
Syntax: To repeat an image horizontally
body {
background-image:link;
background-repeat: repeat:x;
}
Example: This example shows the use of the background-repeat property in CSS.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image:
url(
"https://media.w3wiki.org/wp-content/cdn-uploads/20190417124305/250.png");
background-repeat: repeat-x;
}
</style>
</head>
<body>
<h1>"Hello world"</h1>
</body>
</html>
Output:
CSS Background
The CSS background property is a shorthand for setting multiple background properties in one declaration, including background color, image, position, size, repeat, origin, clip, and attachment. This property is essential for customizing the visual appearance of elements.
Syntax:
css selector{
background: bgColor bgImageUrl bgPosition bgRepeat bgAttachment;
}
/*
.root{
background: white url("gfg_logo.png") center no-repeat fixed;
}
*/
Example: This example display the use of CSS background.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: lightblue url(
"https://media.w3wiki.org/wp-content/cdn-uploads/20190417124305/250.png")
no-repeat center fixed;
}
</style>
</head>
<body></body>
</html>
Output:
CSS Background example
Contact Us