Home / Articles / Programming languages / Markup languages / HTML & CSS / CSS3: multiple backgrounds

CSS3: multiple backgrounds

CSS3: multiple backgrounds
 
CSS3: multiple backgrounds
  • Currently 0 out of 5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Rating: 0/5 (0 votes cast)

Thank you for rating!

You have already rated this page, you can only rate it once!

Your rating has been changed, thanks for rating!

Log in or create a user account to rate this page.


One of the advantages provided by CSS3 is its ability to specify multiple background images for elements.

You don't need to use any new properties to do this. All you have to do is to declare a simple comma-separated list under the CSS background property.

Almost all of the CSS background properties can accept multiple values, so you are able to add many background images (layers) to the same element (background-color is an exception).

For example, to add multiple background layers to an element, just list the values separated by commas:

background: url(first-bg.png) center bottom repeat-x, url(second-bg.png) left top repeat-x;

The priority of a layer depends on its place in the list. So, first layer goes above the second layer, second layer goes above the third layer and so on.

The example above uses shorthand CSS property, the same can be also written as separate CSS properties - background-image and others:

background-image: url(first-bg.png), url(second-bg.png);
background-position: center bottom, left top;
background-repeat: repeat-x;

The comma-separated values of the CSS background-image property have to match to the comma-separated values of the other CSS background properties (such as background-position, background-repeat), starting with the first value in each list.

If one of the CSS properties has more amount of values than background-image, then all spare values in the end of the list will be ignored.

At the same time, if a CSS property has less amount of values than background-image, then all values of the current property will be repeated starting from the first value, as many times as necessary.

In the example above the background-repeat has only one value which is applied for both images in the background-image.

As it was mentioned at the beginning of the article, background-color is the only CSS property which doesn't accept multiple values. Color layer is always positioned below the image layers. So, this CSS property always has only one value. If there is a need to specify the color using shorthand CSS property - background, then it must be placed in the last instance of the comma-separated list.

Multiple backgrounds are supported by the following browsers: Mozilla Firefox 3.6+, Safari 1.0+, Chrome 1.3+, Opera 10.5+ and Internet Explorer 9.0+.

The following example demonstrates where multiple backgrounds can be used.

HTML:

<!DOCTYPE html>
<html>
  <body>Just text!</body>
</html>

CSS:

body {
  background-image: url(logo.png), url(top-center.jpg), url(bottom-center.jpg), url(middle-center.jpg), url(top-center-general.jpg);
  background-position: center 130px, center top, center bottom, center center, center top;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat-y, repeat-x;
  background-color: #651015;
}

Live demo

Such an example can also be achieved without multiple backgrounds using an old fashion way. That's how developers were doing this before the era of CSS3. 

So, old browsers don't support multiple backgrounds for one element. They support only one background image for one element. This means if you have five background images then you have to use five elements in HTML; one background image per element. This increases HTML code which makes it more complex without any apparent reasons.

To write the same example above using the old way, four new elements must be added to HTML. Additionally each new element should also have class or id attribute to define selector with corresponding styles.

HTML:

<!DOCTYPE html>
<html>
<body>
  <div class="first-layer">
    <div class="second-layer">
      <div class="third-layer">
        <div class="fourth-layer">
          Just text!
        </div>
      </div>
    </div>
  </div>
</body>
</html>

CSS:

body {
  background: url(top-center-general.jpg) repeat-x center top #651015;
}

.first-layer {
  background: url(middle-center.jpg) repeat-y center center;
}

.second-layer {
  background: url(bottom-center.jpg) no-repeat center bottom;
}

.third-layer {
  background: url(top-center.jpg) no-repeat center top;
}

.fourth-layer {
  background: url(logo.png) no-repeat center 130px;
}

Live demo

As can be seen, the old way adds more HTML and CSS code; but it still works perfectly fine in old browsers.

If somebody can't understand how such page (example above) was built using five images, just take a look at the following demo, which will add one background image every three seconds.

Live demo


 

Read also

CSS3: Progressive Internet Explorer (PIE)

CSS3: Progressive Internet Explorer (PIE)

Animation in CSS3

Animation in CSS3

Post comment

basicuse.net
html5_css
106160485398655174790

Quick navigation

General navigation