The background property of CSS is opted to distinct the background effects on HTML element. It is opted to set one or more background images for an element. The background of an element is the total size of an element, including padding and border (but not the margin). There are 5 CSS background properties that affect the HTML elements.
• background-color
• background-image
• background-repeat
• background-position
• background-attachment
CSS Background Color-
The background-color property is opted to set the background color of the HTML element. Example-
<HTML>
<head>
<style>
h2{
background: yellow;
}
p{
background: green;
}
</style>
</head>
<body>
<h2>This is h2 Heading</h2>
<p>This is paragraph</p>
</body>
</HTML>
The output of the above code is-
In above example we set the background color green for <p> and yellow for <h3>.
Background Image-
The background-image property is opted to put an image in the background of the HTML element. By default, the image is repeated so it covers the entire element. Example is given below:
<HTML>
<head>
<style>
p{
background-image: url(http://www.google.com/CSS/sublogo.png);
}
</style>
</head>
<body>
<p>This is paragraph</p>
</body>
</HTML>
Output of the above code is given below-
This is paragraph.
CSS Background Repeat-
The background- repeat property is opted to repeat an image in the background. By default, the background-image property repeats the background image horizontally and vertically. Some images are repeated only horizontally or vertically. If we do not want to repeat background image then set no-repeat.
The following code represents the opt of repeat in x-axis-
<HTML>
<head>
<style>
p{
background-image url(http://www.google.com/CSS/files/sublogo.png);
background-repeat: repeat-x;
}
</style>
</head>
<body>
<p>This is paragraph</p>
</body>
</HTML>
The result of the above code is given below:
This is paragraph.
The example of repeat in y-axis is given below-
<HTML>
<head>
<style>
p{
background-image url (http://www.google.com/CSS/files/sublogo.png);
background-repeat: repeat-y;
}
</style>
</head>
<body>
<p>This is paragraph</p>
</body>
</HTML>
The result of the above code is given below:
This is paragraph.
CSS Background Position-
Background-position is opted only when we have opted image in background of any HTML elements. It is opted to distinct the initial position of the background image. By default, the background image is placed on the top-left corner of the webpage. We can set position of the background and all background image positions are given below- top, bottom, center, left, right