CSS Background

The CSS background properties is used to provide background effect of the HTML element.These effect might be element's background color ,element's background image and element's background-image positioning,etc.

Background properties are-

background-color
background-image
background-repeat
background-attachment
background-position
background(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

CSS background-color property is used to specify the background color of the elements.

General Syntax

     h2 {
   background-color: green;
}

Source Code

      
         h2 {
   background-color: green;
}

Code Explanation

Note: In this example, CSS background color is used to provide a background effect around the HTML element.

CSS Background Color With Opacity

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.

General Syntax

     div{
   background-color: green;
   opacity: 0.3;
}

Source Code

      
         div{
   background-color: green;
   opacity: 0.3;
}

Code Explanation

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

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.

General Syntax

     .content_bg {
   background-image: url("../code-support/images/bg-content/bird.jpg");
}

Source Code

      
         .content_bg {
   background-image: url("../code-support/images/bg-content/bird.jpg");
   width: 100%;
   min-height: 100px;
   padding-top: 50px;
   text-align: center;
}

Code Explanation

Note: Please keep in mind that CSS background concept is used to provide background image around the HTML element.

CSS Background Repeat

The css background-image property is repeated background image horrizontally and vertically.The CSS background-repeat property is provided different values.

background-repeat: no-repeat
background-repeat: repeat-y
background-repeat: repeat-x
background-repeat: repeat

General Syntax

     .content_bg {
   background-repeat: no-repeat;
}

Source Code

      
         .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;
}

Code Explanation

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.

CSS background-position

The background-position property is used to denote the position of the background image that is applied to the element.

General Syntax

     .content-bg {
   background-image: url("../code-support/images/bg-content/bird.jpg");
   background-repeat: no-repeat;
   background-position: right top;
}

Source Code

      
         .content-bg {
   background-image: url("../code-support/images/bg-content/bird.jpg");
   background-repeat: no-repeat;
   background-position: right top;
}

Code Explanation

Note: Please keep in mind that CSS background position specifies the background image position.

Online Test / Quiz

Question set 1

Our Tutorials

Html Tutorial HTML

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4

Materialize CSS Tutorial MATERIALIZE CSS