imagecssflying-saucerxhtmlrenderer

content: url('image.png') in flying saucer @page @top-left

does flying saucer support putting images in CSS3 margin-boxes?

I tried something like

@page {
    @top-left {
        content: url('/resources/media/image.png');
    }
}

but this doesn't seem to work. Is there any solution to put the image where I want to?

Solution

  • You can set the image as the background of a div, and put the div in the top-left margin.

    Here is a sample:

    <html>
<head>
    <style>
    @page {
        @top-left {content: element(top-left)}
    }
    #div-top-left {
        position: running(top-left);
        height:50px;width:50px;
        background-image: url('http://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png');
    }
    </style>
</head>
<body>
    <div id="div-top-left"></div>
</body>
</html>