CSS3 allows you to add multiple background images for an element, through the background-image property. The different background images are separated by commas, and the images are stacked on top of each other, where the first image is closest to the viewer. Multiple background images that can be added to any element with these background properties, which allow greater control of the background element:
| HTML file: | Displayed by browser: |
|---|---|
|
<style>
#backgrd1 { background-image: url(../html_beg/images/rose.png), url(../html_beg/images/paper.gif); background-position: right bottom, left top; background-repeat: no-repeat, repeat; padding: 15px; } </style> <body> <div id="backgrd1"> <h3>The Long Hand Way</h3> <p>We are using two background images here.</p> <p>The first image is a rose (aligned to the bottom and right).</p> <p>The second image is a paper background (aligned to the top-left corner).</p> </div> </body> |
The Long Hand WayWe are using two background images here. The first image is a rose (aligned to the bottom and right). The second image is a paper background (aligned to the top-left corner). |
|
<style>
#backgrd2 { background: url(../html_beg/images/rose.png) right bottom no-repeat, url(../html_beg/images/paper.gif) left top repeat; } </style> <body> <div id="backgrd2"> <h3>The Short Hand Way</h3> <p>Multiple background images can also be set with the <strong>background</strong> shorthand property.</p> <p>The results are the exact same result as the example above.</p> </div> </body> |
The Short Hand WayMultiple background images can also be set with the background shorthand property. The results are the exact same result as the example above. |
