CSS Background Color And Background Image

The CSS background color and background image 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)

CSS Background Color

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

General Syntax

      selector{
  background-color: colorValue;
}

Try it now

Source Code

          h1 {
  background-color: #393e46;
  color: #ffffff;
  padding: 10px;
}
p {
  background-color: #687980;
  color: #ffffff;
  padding: 10px;
}
div {
  background-color: #ff6701;
  color: #ffffff;
  padding: 10px;
}

Try it now

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

      selector{
 opacity:  0 to 1;
}

Try it now

Source Code

          h1 {
  background-color: #393e46;
  color: #ffffff;
  opacity: 0.8;
  padding: 10px;
}
p {
  background-color: #687980;
  color: #ffffff;
  opacity: 0.8;
  padding: 10px;
}
div {
  background-color: #ff6701;
  color: #ffffff;
  opacity: 0.9;
  padding: 10px;
}

Try it now

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

      selector {
  background-image: url("....");
}

Try it now

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

Try it now

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 horizontally and vertically. The CSS background-repeat property is provided different values. These are background-repeat: no-repeat, background-repeat: repeat-y, background-repeat: repeat-x, background-repeat: 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;
}

Try it now

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.

Source Code

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

Try it now

Code Explanation

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

Online Test / Quiz

Question set 1

CSS Background Color And Background Image