I'm trying to show page numbers at the bottom of the page, along with a wavy line as the footer background image.

This is the CSS I have used:

@page main{
@bottom-center{
background-image:url("http://example.com/images/footer.jpg");
background-position:20% 35%;
background-repeat:no-repeat;
prince-background-image-resolution:auto;
}
@bottom-left {
        margin-left:60pt;
        margin-bottom:20pt;
        font-size:40pt;
        color:#231F20;
        content: counter(page);
    }
}

But the result is that the page number is partly hidden, as in the screenshot.

I'd appreciate your help with this!

Thanks.

1. background-footer.png‎ 5.6 kB

Edited 4 Sep 2014 by Initiator

Can you put the page number in @bottom-center instead, and left align it?

Mike, I solved it by setting the footer's background image to that of the whole page, and positioning it appropriately.

I moved the counter(page) to @bottom-left and assigned it a suitable margin-left.