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

Question

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?

score 6 · Accepted Answer · answered Oct 15 '14 at 17:00

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>

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

1 Answers1