CSS Background (Single & Multiple)

Introduction

The CSS background property is used to apply a background to any element. We can specify color, image, gradients, etc for background specifying positions, attachments, size also. Background property alone in CSS is the shorthand property to define a proper background using several individual properties. Using shorthand property we can define all the background related aspects into one property itself.

Let us see different properties related to the background:
We can use all the above properties for defining the background. The order doesn't have any hard fast rule but we can use the recommended one:

background: background-image size position repeat attachment origin clip color

Let us see an example of the same. We will apply to specify different properties using shorthand syntax.

background: url('abc') 100px 100px top left no-repeat fixed padding-box content-box blue;

Applying Background

We can apply the background as follows to a header div to apply an image as the header.

.header {
  background: url(header.jpg) center;
  background-size: cover;
  background-color: black;
  background-repeat: no-repeat;
  height: 200px;
}

Multiple Background

In CSS we can apply multiple backgrounds using the same shorthand property as below. We will apply the below style on a div having class as the header. So it looks like below:

.header {
  background: url(image1.jpg) repeat, url(image2.jpg) no-repeat;
  background-size: 100px 200px, contain;
}

Now we will see how we can define multiple backgrounds using individual properties as well.

  background-image: url(img1.png), url(img2.png);
  background-position: left bottom, left top;
  background-repeat: no-repeat, no-repeat;

Comments