CSS Multiple Backgrounds

CSS gives you the ability to add multiple backgrounds to a single element. The backgrounds are layered on the top of one another. The number of layers is determined by the number of comma-separated values in the background-image or background shorthand property.

Example:

#multi-image {

background-image: url(image1.png), url(background-image.jpg);

background-position: right bottom, left top;

background-repeat: no-repeat, repeat;

background-size: 150px 150px, cover;

padding: 15px;

}

The below example uses the background shorthand property.

Example:

#multi-image {

background: url(image1.png) right bottom no-repeat, url(background-image.jpg) left top repeat;

background-size: 150px 150px, cover;

}

CSS Background Size Property

The background-size property can be used to define the size of the background images.

The background image size can be specified using the percentage or pixel values as well as the keywords auto, contain, and cover. Negative values are not allowed.

Example:

#image {

background: url(image1.png);

background-size: 150px 60px;

background-repeat: no-repeat;

}

The following example shows how the background-size values cover and contain works.

Example:

.background-image1 {

border: 1px solid red;

height:100px;

width:130px;

background:url(image1.png);

background-repeat: no-repeat;

background-size: cover;

}

.background-image2 {

border: 1px solid red;

height:100px;

width:130px;

background:url(image1.png);

background-repeat: no-repeat;

background-size: contain;

}

.background-image3 {

border: 1px solid red;

height:100px;

width:130px;

background:url(image1.png);

background-repeat: no-repeat;

}

Full Size Background Image

Example:

html {

background: url(background-image2.jpg) no-repeat center fixed;

background-size: cover;

}

CSS background-clip Property

The background-clip property in CSS is used to define how to extend background (color or image) within an element.

The background-clip property includes three values: border-box, padding-box, content-box.

Example:

.square {

width: 200px;

height: 150px;

padding: 15px;

border: 8px dashed #000;

background: #ff5722;

}

.clip1 {

background-clip: border-box;

}

.clip2 {

background-clip: padding-box;

}

.clip3 {

background-clip: content-box;

}

CSS background-origin Property

The background-origin is a property that helps in adjusting the background image of the webpage. This property is used to set the origin of the image in the background. By default, this property sets the background image origin to the upper-left corner of the screen/webpage.

It can take the same values as background-clip property: border-box, padding-box, content-box.

Example:

#box1 {

border: 7px solid red;

width: 200px;

height: 100px;

padding: 40px;

background: url(image1.png);

background-repeat: no-repeat;

background-origin: padding-box;

}

#box2 {

border: 7px solid red;

width: 200px;

height: 100px;

padding: 40px;

background: url(image1.png);

background-repeat: no-repeat;

background-origin: border-box;

}

#box3 {

border: 7px solid red;

width: 200px;

height: 100px;

padding: 40px;

background: url(image1.png);

background-repeat: no-repeat;

background-origin: content-box;

}

You Are Here

CSS Multiple Backgrounds