CSS3 Multiple Backgrounds

Buy ebook

CSS Mine

Get my e-book focusing on CSS3 and
modern web UI development.

Learn more

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 the existing background property.

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;

Try it Yourself

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.

Browser Support

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;

Content

Introduction

Introduction

On today’s frontend UI development

UI development transformations

Tools, technologies and workflows

Fallback strategies

CSS3 reference guide

Introduction

Text properties

Background properties

Border properties

Box properties

Media Queries

CSS transforms

CSS animations

CSS3 Layout

Another CSS3 Properties

Non-standard properties

End

End

Buy ebook

CSS Mine

Get my e-book focusing on CSS3 and
modern web UI development.

Learn more