Multiple Backgrounds in CSS

CSS lets you apply multiple backgrounds to a single element, layered on top of each other.

Syntax

.box {
    background:
        url('top-layer.png') no-repeat top right,
        url('middle-layer.png') no-repeat center,
        url('bottom-layer.jpg') center/cover no-repeat;
}

The first background listed is on top; the last is on the bottom.

Practical Examples

/* Decorative corners */
.fancy {
    background:
        url('corner-tl.svg') no-repeat top left,
        url('corner-br.svg') no-repeat bottom right,
        #f0f4f8;
}

/* Gradient over image */
.hero {
    background:
        linear-gradient(to bottom, rgba(0,0,0,0) 50%, rgba(0,0,0,0.7)),
        url('hero.jpg') center/cover no-repeat;
    color: white;
}

Individual Properties with Multiple Backgrounds

.multi {
    background-image: url('overlay.png'), url('main.jpg');
    background-position: center, center;
    background-size: 200px 200px, cover;
    background-repeat: no-repeat, no-repeat;
}

Background Color as Final Layer

Note: background-color can only be set once and always goes on the bottom-most layer:

.box {
    background:
        url('pattern.svg') repeat,
        #1a1a2e;  /* Color is the bottom layer */
}