Home / Tutorials / Multiple Backgrounds with CSS3
multiple_bg

Multiple Backgrounds with CSS3

CSS3 allows web designers to specify multiple background images for box elements, using nothing more than a simple comma-separated list.

Browser support for multiple backgrounds is relatively widespread with Mozilla Firefox (3.6+), Safari/Chrome (1.0/1.3+), Opera (10.5+) and even Internet Explorer (9.0+) all implementing the feature.

Here’s a basic example:

This box has two background images, the first a sheep (aligned to the bottom and center) and the second a grass and sky background (aligned to the top-left corner).

Here’s the code for this:

How it Works

Multiple background images can be specified using either the individual background properties or thebackground shorthand property. We’ll first look at an example using the individual background properties.

Specifying multiple backgrounds using the individual background properties

Multiple background images are specified using a comma-separated list of values for the background-image property, with each value generating a separate ‘background layer’. The the first value in the list represents the top layer (closest to the user), with subsequent layers rendered behind successively.

The Syntax:
Note: a value of ‘none’ still generates a layer.

Example:
A comma separated list is also used for the other background properties; background-repeat,background-attachment, background-position, background-clip, background-origin andbackground-size.

Example:
The comma separated lists from the individual properties are then matched up, starting with the first value in each list.

If excess values are specified for any of the individual properties they are ignored. For example; if four values are supplied for the background-position property, but only three values are supplied for thebackground-image property, the fourth value in the list would not be used.

Similarly, if not enough values are supplied for any of the individual properties, the list of values for that particular property are repeated, from the first value, as many times as required. For example; if only two values are supplied for the background-position property, but three values are supplied for thebackground-image property, the list of values for background-position would be repeated, thus the third background image specified would have the same background-position value as the first.

If a background color is specified, using the background-color property, this is applied as the final background layer, behind any background images.

Specifying multiple backgrounds using the ‘background’ shorthand property

Multiple backgrounds can also be specified using the background shorthand property.

The Syntax:
Note: background-color is only permitted in the final background layer.

Example:
The CSS3 Backgrounds and Borders specification offers further clarification of the backgroundshorthand syntax:

The number of comma-separated items defines the number of background layers. Given a valid declaration, for each layer the shorthand first sets the corresponding layer of each of ‘background-position’, ‘background-size’, ‘background-repeat’, ‘background-origin’, ‘background-clip’ and ‘background-attachment’ to that property’s initial value, then assigns any explicit values specified for this layer in the declaration. Finally ‘background-color’ is set to the specified color, if any, else set to its initial value.

If one <box> value is present then it sets both ‘background-origin’ and ‘background-clip’ to that value. If two values are present, then the first sets ‘background-origin’ and the second ‘background-clip’.

Browser Compatibility

Browser support for multiple backgrounds is relatively widespread with all of the main browsers offering support, without the need for vendor prefixes.

Firefox has supported multiple backgrounds since version 3.6 (Gecko 1.9.2), Safari since version 1.3, Chrome since version 10, Opera since version 10.50 (Presto 2.5) and Internet Explorer since version 9.0.

Cross Browser Examples

Here are a couple of examples which should work in all of the browsers detailed above. For each example the code is given using both the individual background properties and the background shorthand property.

Example A

Our first example has an old-style paper background, with additional decorative images aligned to the the top-left and bottom-right corners:

Example A

The code for this can be written in one of two ways, either:

 

 

About cmadmin

Web Developer & Designer | Android App Developer

Check Also

sass

Amazing SAAS – extension of CSS3

What is SASS? SASS is an extension of CSS3, adding nested rules, variables, mixins, selector …

analog-clock

Crate Analog Clock using CSS3 only without image

Analog clock without images? yes, Today we are going to create analog clock using CSS3, Javascript …

Leave a Reply

Your email address will not be published. Required fields are marked *

Login


Username
Create an Account!
Password
Forgot Password? (close)

Sign Up


Username
Email
Password
Confirm Password
Want to Login? (close)

Forget Password?


Username or Email
(close)
%d bloggers like this:
SHARE
OR
SUBSCRIBE
To get latest new / tutorial / technology / development information subscribe with us.
ARE YOU READY? GET IT NOW!
Lets Get Updated with latest trends & tutorials!
Your Information will never be shared with any third party.
Ready for latest tutorials & tools !
OR SUBSCRIBE WITH