Lesson: lesson-multiple-backgrounds

This example renders two background images for the same element.

PDF files

Converter PDF Preview
PDFreactor
OK
Download
PrinceXML
OK
Download
Antennahouse
ERROR
Download
Does not render at all (no support for multiple background images)
Vivliostyle
OK
Download

Stylesheet

1
2
3
4
5
6
7
8
9
@import url("../styles/a5.css");

#example {
    width: 500px;
    height: 250px;
    background-image: url(sheep.png), url(betweengrassandsky.png);
    background-position: center bottom, left top;
    background-repeat: no-repeat;
}

HTML input

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="styles.css" />
    </head>
    <body>
        <div id="example">
            <p>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).</p>
        </div>
    </body>
</html>