CSS Multiple Backgrounds

CSS allows you to layer multiple background images on an element using the background-image property. This technique is known as using multiple backgrounds.

Example
Try yourself
        
            body {
    background-image: url('/images/common/background.jpeg'), url('/images/common/background-image.png');
    background-position: top left, center;
    background-size: 200px auto, cover;
    background-repeat: no-repeat, repeat-x;
}

        
    

In this example, the element with the class "element" will have two background images layered on top of each other. The first image specified by url('/images/common/background.jpeg') will be placed at the top, and the second image specified by url('/images/common/background-image.png') will be placed below it.