Background

CSS background property is used to define the background effects on element.

background-color

The background-color property in CSS applies solid colors as background on an element.

p {
   background-color: #82a43a; 
}

Background Color

opacity/transparency

By using the opacity/transparency property, you can define a custom CSS transparency level for an element.

p {
  background-color: #82a43a;
  opacity: 0.6;
}

Background Color

Transparency Using RGBA

You can also define the color you want to use in RGBA values. The A in the acronyms stands for the alpha channel which is defined as the fourth value.

p {
   background: rgba(80, 180, 90, 0.4);  
}

Background Color

background-image

The background-image property is used to set an image as a background of an element.

p {
   background-image: url("backimage.gif");  
}

background-repeat

The background-repeat CSS property sets how background images are repeated.

The back ground repeat property can take the following values ​​single or in combination:

selector{
  background-repeat: inherit | initial | no-repeat | repeat | repeat-x | repeat-y | round | space;
}
p{
   background-repeat: no-repeat; 
}

background-position

The background-position property in CSS allows you to defines the position of the background image and move a background image (or gradient) around within its container.

It has three different types of values:

  • Length values (100px 5px)
  • Percentages (100% 5%)
  • Keywords ( top right)
p{
   background-position: center;
}

background-attachment

The background-attachment CSS property sets whether a background image’s position is fixed within the viewport, or scrolls with its containing block. This property can take the following values.

selector{
      background-attachment: scroll|fixed|local|initial|inherit;
}
p{
   background-attachment: fixed;
}

Multiple Background Images

You can set multiple background images if you want. different images are separated by commas.

selector{
   background: background1, background 2, ..., backgroundN;
}
p{
   background-image: url(bg1.gif), url(bg2.gif);  
}

background – Shorthand

You can use the shorthand property background.

selector {
      background: background-color background-image background-repeat background-attachment background-position;
}
p{
    background-color: #fcc4;
    background-image: url("bg1.png");
    background-repeat: no-repeat;
    background-position: right bottom;
 }

The above code is written as follows, short and in one line:

body {
    background: #fcc4 url("bg1.png") no-repeat right bottom;
}