The CSS background properties is used to provide background effect of the HTML element.These effect might be element's backgound color,element's background image and element's background-image positioning,etc.
Background properties are-
background-colorbackground-imagebackground-repeatbackground-attachmentbackground-positionbackground(shorthand property)Note: Keep in mind that CSS background is used to provide the background effect to the HTML element.
Followings are the background properties like background-color,background-image,background-repeat,background-attachment,background-position.
CSS background-color property is used to specify the background color of the elements.
h2 {
background-color: green;
} h2 {
background-color: green;
}Note: In this example, CSS background color is used to provide a background effect around the HTML element.
The opacity is used to set the transparency of an element.Opacity value is exist within 0 to 1.Opacity lower value zero(0) indicates most transparent while as max value(1.0) indicates full color.
div{
background-color: green;
opacity: 0.3;
} div{
background-color: green;
opacity: 0.3;
}Note: In this example, the CSS opacity feature is used. It indicates the transparency of an element. Opacity minimum value zero indicates the most transparent color while max value one indicates full color.
CSS background-image property is used to specify background image of the element.
Please keep in mind that background image of the element is by default repeated itself to cover entire element.
.content_bg {
background-image: url("../code-support/images/bg-content/bird.jpg");
} .content_bg {
background-image: url("../code-support/images/bg-content/bird.jpg");
width: 100%;
min-height: 100px;
padding-top: 50px;
text-align: center;
}Note: Please keep in mind that CSS background concept is used to provide background image around the HTML element.
The css background-image property is repeated background image horrizontally and vertically.The CSS background-repeat property is provided different values.
background-repeat: no-repeatbackground-repeat: repeat-ybackground-repeat: repeat-xbackground-repeat: repeat.content_bg {
background-repeat: no-repeat;
} .content_bg {
background-image: url("../code-support/images/bg-content/bird.jpg");
background-repeat: no-repeat;
width: 100%;
height: 100px;
padding-top: 50px;
text-align: center;
}Note: Please keep in mind that CSS background is repeated itself to horizontally x-axis & vertically y-axis.Therefore,CSS background-repeat property controls the background image repeatation.
The background-position property is used to denote the position of the background image that is applied to the element.
.content-bg {
background-image: url("../code-support/images/bg-content/bird.jpg");
background-repeat: no-repeat;
background-position: right top;
} .content-bg {
background-image: url("../code-support/images/bg-content/bird.jpg");
background-repeat: no-repeat;
background-position: right top;
}Note: Please keep in mind that CSS background position specifies the background image position.