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
Weasyprint  OK
PagedJS  OK
Typeset.sh  OK
Vivliostyle  OK
BFO  OK
OK OK with issues Error Unsupported

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