Multiple Background­‑Images

This small tutorial will show you how to place more than one background-image in one container.
And how to setup the css rules on positioning them.

The output for this will be the following basic form:

.myclass { background: background1, background 2, …, backgroundN;}

Layout of the container

Setup for the above will be a container (above it is a 1/1 container) – it could be a color-section too or 1/2 etc.

In this case it is that 1/1 container – because there was a whish of another participant that he wants to have that overlapping a slider with tree different backgrounds.

The 1/1 Container receives the custom-class: multiple-background

You can do this with both the shorthand background property and the individual properties thereof except for background-color. That is, the following background properties can be specified as a list, one per background: background, background-attachment, background-clip, background-image, background-origin, background-position, background-repeat, background-size.

For my setting here i take background-image.

You can apply multiple backgrounds to elements. These are layered atop one another with the first background you provide on top and the last background listed in the back. Only the last background can include a background color.

These elements are placed in the container

And a gradient background

here is the css rule:

.multiple-background {
 box-shadow: inset 0px 0px 111px 3px rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 background-image: url(/wp-content/uploads/bg-edge-100-1.png ) , url(/wp-content/uploads/Seal.png ), -webkit-radial-gradient(center, ellipse farthest-corner, #FFFFFF 0%, #FFFFFF 50%, #E8E8E8 100%) !important;
 background-image: url(/wp-content/uploads/bg-edge-100-1.png ) , url(/wp-content/uploads/Seal.png), radial-gradient(ellipse farthest-corner at center, #FFFFFF 0%, #FFFFFF 50%, #E8E8E8 100%) !important;
 background-repeat: no-repeat;
 background-position: right bottom, right bottom , center center;
 background-size: 120px auto, 250px auto, contain;

You can see that there are 3 background-images set. The first is the on top layer the last (gradient) is the back layer.
So that golden seal is behind the edge.

In the same sequence you can now set the position and the size – and yes you can do it with background-repeat too. I want for all a no-repeat value.

Thats it.

(for cross-browser compatiblity you have to declare the gradient for webkit browsers too)