CSS background properties are used to define the background effects of an element.
CSS properties used for background effects:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
- The background-color property is used to set the background color of an element.
- The background-image property is used to set the background image of an element.
- The background-repeat property is used to control the repetition of an image in the background.
- The background-position property is used to control the position of an image in the background.
- The background-attachment property is used to control the scrolling of an image in the background.
- The background property is used as shorthand to specify a number of other background properties.
<!DOCTYPE html>
<html>
<head>
<style>
div
{
background-color:#999;
width:400px;
height:250px;
}
p{
text-align:center;
top:45%;
position:relative;
}
</style>
</head>
<body>
<div>
<p>Hello this is div background color</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
body { background-image:url('bg.png'); }
</style>
</head>
<body>
<h1>background Image</h1>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
body
{
background-image:url('gradient2.png');
background-repeat: repeat;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
body
{
background-image:url('gradient2.png');
background-repeat:repeat-y;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
Background Image - Set position and no-repeat
Note: When using a background image, use an image that does not disturb the text.Showing the image only once is specified by the background-repeat property:
<!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>
The position of the image is specified by the background-position property:
<!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>Hello World!</h1>
<p>W3Schools background no-repeat, set position example.</p>
<p>Now the background image is only shown once, and positioned away from the text.</p>
<p>In this example we have also added a margin on the right side, so the background image will never disturb the text.</p>
</body>
</html>
Background - Shorthand property
<!DOCTYPE html><html>
<head>
<style>
body
{
background:#ffffff url('img_tree.png') no-repeat right top;
margin-right:200px;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>Now the background image is only shown once, and it is also positioned away from the text.</p>
<p>In this example we have also added a margin on the right side, so that the background image will not disturb the text.</p>
</body>
</html>
When using the shorthand property the order of the property values is:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
