multiple-backgrounds

This example renders two background images for the same element.

Repository files

PDF files

Converter Status PDF Preview
PDFreactor  OK
PrinceXML  OK
Antennahouse  OK

HTML input

<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>

Stylesheet

@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;
}