If you have ever used photoshop or any image editing software, you must have used different layers of the image to create a composite background. It's fun, right? How about if you could do this without having to use photoshop just using a browser? I am not talking about layering images on top of one another. I am going to show you a way to add multiple images within the same element.
The CSS background property can use more than one image with all the shorthand properties as well as using consequent properties separated by comma (,). This opens up the possibility to use CSS multiple background images and create and manipulate composite images. The best way to do it is using PNG or transparent images or using CSS blend modes.
We'll use both the concept to understand the behavior with transparent images and overlay modes.
Multiple Background Images Syntax:
Consequent:
selector{
background-image: image1,image2,image3,image4;
background-size: size1,size2,size3,size4;
background-position:position1, position2 , position3, position4;
}- image: valid background url
- background-size: accepts valid length, cover, contain
- background-position: accepts valid background position
Shorthand:
selector{background: properties1 , properties2, properties3};- properties: all valid background consequent properties.
CSS Multiple Background Images using transparent images:
This is possibly the simplest way to compose an image. You can just use any of the above methods to specify images at the given position and size. You can also manipulate images using other background properties.
Observe the below example:
This looks like a crazy animation but in fact, this entire scene is made up of only one element and using multiple transparent background images. The way it works Is you can start adding images using comma (,) the first image will have the highest depth. I have created this scene by using multiple transparent image assets.
My example uses the following code:
.stage{
background-color: aquamarine;
background-image: url(images/run.gif),url(images/platform.png),url(images/plx-2.png),url(images/plx-3.png),url(images/plx-4.png);
background-size:5%,auto 20%,150%,130%,120%;
background-repeat:no-repeat,repeat-x,repeat-x,repeat-x,repeat-x;
background-position: 40% 80%,100% 100%, left center;
}In this example, the layering works because they're transparent. But what if the layers are not transparent? In that case, CSS blend modes take control over non-transparent images.
CSS Multiple Background Images using non-transparent images:
When there are multiple images that require composite output using regular images, We can use CSS blending. This won't work for every case. But blending mode works great with high contrast images. I have an in-depth article about various blending modes. Let's observe the below example:
This example uses 2 images. Both the images are jpg images. So when we use regular images multiple images, only the first one appears. In the above example, I have used soft-light blend mode to overlay dark images on top of other images.
the code looks like this:
@keyframes animate {
0%{background-image: url(images/watching.jpg),url(images/1.jpg);}
20%{background-image: url(images/watching.jpg),url(images/2.jpg);}
40%{background-image: url(images/watching.jpg),url(images/3.jpg);}
60%{background-image: url(images/watching.jpg),url(images/4.jpg);}
80%{background-image: url(images/watching.jpg),url(images/5.jpg);}
100%{background-image: url(images/watching.jpg),url(images/1.jpg);}
}
.stage{
animation: animate 20s infinite linear forwards;
background-blend-mode: soft-light;
background-image: url(images/watching.jpg),url(images/1.jpg);
background-size:auto 100%,cover;
background-repeat:no-repeat,repeat-x;
background-position: 100% 100%,50% 50%;
}
I have used CSS animations to loo through some other images using multiple images, and Yes. you can animate all the background properties as needed. This can be used to create stunning moving backgrounds.
CSS Multiple Background Images using gradient:
Using external images is not the only way to do background images. You can use CSS gradients to make one on the fly. This Gradient can be overlaid on other images, and basically use the same features as discussed above.
A more practical example of CSS background images is using a skeleton loader. A skeleton loader is an image that you see on most social media sites. The blocky elements that you see when your profile is loading… That's the skeleton loader. I have used multiple backgrounds in my CSS only parallax effect.
It's a combination of gradients in a nutshell. Let's do the demo and check what's inside.
The skeleton structure is made out of basic shapes. I have created one loading class that enabled one image overlay on top of the empty loading block. This method could be useful in frontend technologies like react for lazy loading content on scroll.
@keyframes gradient {
0%{
background-size:0% 26px,0% 24px,0% 20px,0% 20px,100% 100%;
}
20%{
background-size:60% 26px,0% 24px,0% 20px,0% 20px,100% 100%;
}
40%{
background-size:60% 26px,33% 24px,0% 20px,0% 20px,100% 100%;
}
60%{
background-size:60% 26px,33% 24px,90% 20px,0% 20px,100% 100%;
}
80%{
background-size:60% 26px,33% 24px,90% 20px,85% 20px,100% 100%;
}
}
.loading{position: relative; min-height: 200px;}
.loading::before{
content:''; position: absolute;
top:0; left: 0; width: 100%; height: 100%;
background-color:#fff;
background:
linear-gradient(90deg,#ccc,#eee) no-repeat 10px 30px/60% 26px,
linear-gradient(90deg,#ccc,#eee) no-repeat 10px 70px/33% 24px,
linear-gradient(90deg,#ccc,#eee) no-repeat 10px 125px/90% 20px,
linear-gradient(90deg,#ccc,#eee) no-repeat 10px 154px/85% 20px,
linear-gradient(90deg,#fff,#fff) no-repeat 0 0 /100% 100%;
animation: gradient 1500ms infinite both;
}
We're animating the background-position of the created gradient to give it a loading effect.
Mixing Gradient and Images Using CSS
When you have a big website and you want to stay consistent with your images, you have to use the same photoshop template to create your featured images over and over again. Well, this photoshop could workflow be easily converted to CSS-based overlay. CSS gradients are sufficient to add a tinge of branding to the images.
Let's use the same example above with some images. And CSS overlays to see the difference.
Observe the images in the following example. You'd see branded images and regular images. Imagin the efforts you can save by creating a CSS filter using multiple background images. This could save a ton of work. I used a simple cover class to add branding to the image.
.cover{
width:100%; height:0; padding-top:50%;
background: var(--img) no-repeat center center/cover ,linear-gradient(0,#e91e63,#673ab7);
background-blend-mode: screen;
animation: cover infinite 1s steps(2);
}
The above example uses CSS variables to put an image as a background using inline style. This allows us to manipulate images using CSS properties.
Browser compatibility of CSS Multiple Background Images:
It's 2021 already. It's about fully supported property across mobile and desktop browsers. So it's safe to use it.
Responsiveness of CSS Multiple Background Images:
Since it supports all the background property we can use % or viewport units to define the position and dimension of the image. It will make it responsive. [more or less]
How to animate Multiple Background Images:
CSS animation works the same as a single background image. With @keyframes definition, you can define what property of the image should be changed during the animation. We can control each property separated by comma (,).
Background Images vs img tag Performance:
SEO: The img tags are part of DOM so they are crawled by Google and they're indexable. Background images however are just designs.
Accessibility: The img tags are the real things and are accessible because of the ability to add title and alt tags. Designs are will face accessibility issues.
Manipulation: The img tags don't have much control over their display. Background images can use features like background-attachment and background-position as well as background-size.
Speed: Since images are dom elements, even if there is the same image used multiple times, It will make a new request each time an image is encountered in the document. Background images are loaded a single time.
How to Deal With Multiple Background Images CSS Positioning:
The easiest method to manipulate multiple background image positioning is using the consequent property background-position. You can specify the position for the background image separated by comma (,).
.background{
background-position: center top, center center, 100% 100%;
}
How to manipulate multiple background images with javascript:
using any property of the background is the same as using the singular property of the background.
document.getElementById("background-element").style.backgroundPosition = 'center top, center center, 100% 100%';
// sets background position for 3 different images.
There are JS properties for each CSS background property that can be manipulated with javascript.
- background-color: backgroundColor
- background-image: backgroundImage
- background-repeat: backgroundRepeat
- background-attachment: backgroundAttachment
- background-position: backgroundPosition
- background-size: backgroundSize
- background-origin: backgroundOrigin
- background-clip: backgroundClip
How Good of a result can I get using Multiple Background Images?
Well, This feature has been present in CSS for a long time. This is really underutilized feature among CSS designers. This could solve many responsive image problems. There are many ways to do the same thing in CSS design so it's good to have knowledge of features. I personally use it a lot to composite a responsive background image or banner. You can try this feature for your next project. It's really fun to have additional control over your background images.
