Get my e-book focusing on CSS3 and
modern web UI development.
dig into web UI development
Last modified: 25. 2. 2016
How to layer multiple images or colors in one element?
In fact, multiple backgrounds are not a CSS property, just a new way of using
And what is the syntax? Simply divide the layer using a comma:
background: url('top_image.png'), url('center_image.png'), #ddccaa;
The image before the first comma will always be the top one.
If you do not use a
background shorthand, the declaration of other background
image properties will also be divided by a comma:
background-image: url('image.png'), url('next_image.png'); background-repeat: no-repeat, repeat;
Remember that an image can also be represented by a CSS3 gradient with a semi-transparent background. You can make use of this effect to cover the image even if you do not know the height of the element:
background: linear-gradient(180deg, transparent 0%, #333 100%), url('bg.jpg');
See a live example at cdpn.io/e/lvKkC.
IE9+. Be careful - the
background property with multiple values is ignored if
the browser does not know how to handle it. Therefore, you always have to define
a fallback for older browsers such as IE8. See an example:
background: #ddccaa; background: url('top_image.png'), url('center_image.png'), #ddccaa;