How to set multiple background images using CSS ?

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

Browser support : Mozilla Firefox (3.6+), Safari/Chrome (1.0/1.3+), Opera (10.5+) and even Internet Explorer (9.0+) all implementing the feature.

Example:- 

#example1 {
   width: 500px;
   height: 250px;
   background-image: url('Image 1 URL'), url('Image 2 URL');
   background-position: center bottom, left top;
   background-repeat: no-repeat;
}

Multiple background images can be specified using either the individual background properties or the background
shorthand property.

Method 1:-
Using individual background properties

#example1 {
   background-image: url('Image 1 URL'), url('Image 2 URL');
}

A comma separated list is also used for the other background properties; background-repeat,background-attachmentbackground-positionbackground-clipbackground-originand background-size.

#example1 {
   background-position: center bottom, left top;
}

Method 2:- Using the ‘background’ shorthand property

#example2 {
background: url('Image 1 URL') center bottom no-repeat, url('Image 2 URL') left top no-repeat;
}

Reference: http://www.css3.info/preview/multiple-backgrounds/

Programming is easy….

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s