DESCRIPTION
CSS background property allows us to specify background effects on an element.
There are 5 background properties that affects an HTML element –
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
Background-Color
Background-color property specifies the background color of an element.
Example –
<!DOCTYPE html>
<html>
<head>
<style>
h2 , p {
background-color: #b0d4de;
}
</style>
</head>
<body>
<h2>Hello Monks.</h2>
<p>Hello HtmlCssMonk. This is an example of CSS background-color.</p>
</body>
</html>
This Code will produce the following result on your webpage –
Background-Image
Background-image property is used to set an image as the background of an element.
Example –
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("blur.jpg");
margin-left: 80px;
}
</style>
</head>
<body>
<h1>HtmlCssMonk</h1>
<h2>Learn like a Monk</h2>
</body>
</html>
This Code will produce the following result on your webpage –
Note – When using a background image, use an image that does not disturb the text.
Background-repeat
By default, the background-image property repeats the background image horizontally and vertically.
Example –
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("hcm.png");
background-repeat: repeat-x;
}
</style>
</head>
<body>
</body>
</html>
repeat-x repeats the image only horizontally.
This Code will produce the following result on your webpage –
NOTE – repeat-y repeats the image only vertically.
Background-Attachment
Background-attachment property is used to specify if the background image is fixed or scroll with the rest of the page in browser window.
Example –
To make background Image fixed ( will not scroll with the rest of the page ) –
body {
background-image: url("animal.png");
background-repeat: no-repeat;
background-attachment: fixed;
}
To make background Image scroll with rest of the page –
body {
background-image: url("animal.png");
background-repeat: no-repeat;
background-attachment: scroll;
}
Background-Position
Background-position property is used to define the initial position of the background image. By default, the background image is placed on the top-left of the webpage.
Example –
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("hcm.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
</style>
</head>
<body>
</body>
</html>
This Code will produce the following result on your webpage –
Next topic – Positions in CSS
Previous topic – Borders in CSS