multiple background-images

First Caption
additional caption text here

Click me Click me
Second Caption
additional caption text here

Click me Click me
Third Caption
additional caption text here

Click me Click me

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

.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)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

You see on top an elegant method to have a diagonal section

(mimic) by having on the bottom a white png with right triangle.

On top you have a colored „border“

and the image on the lowest background.

Here you need only one definition for background-image because no need for -webkit definition (no gradient inside).

.three-bg-images {
    background-image: url(//webers-testseite.de/wp-content/uploads/diagonal.png), url(//webers-testseite.de/wp-content/uploads/bandeau_1920.jpg) , url(//webers-testseite.de/wp-content/uploads/DSC8131.jpg);
    background-repeat: no-repeat;
    background-position: left bottom, left top, center center;
    background-size: 100% 120px , 100% 20px,cover;
}

If you gave that settings to the class you could style even columns with that background.

Webers Webdesign