Had another question here, but I've gotten that one resolved. Have one more question:

I'm simply trying to put an image in my @bottom (footer) section so that it expands across the bottom of the page just like the header. However, it's sitting on top of the text. I've tried z-index: -1 but that doesn't put it behind the content that's specified for @bottom-left, @bottom-right, etc. Any easy way to do this?

Edited 14 Jul 2014 by altjx

z-index does not apply to margin boxes. But if you flow a block to the footer and put all of your text in that instead of using three margin boxes, it may be easier.

Woops. I edited too fast. Thanks for your help. Going to look a bit further into this based on your suggestion.

Edited 15 Jul 2014 by altjx

You could put a background-image directly on the @page, eg.

@page {
    background: url("...") bottom left no-repeat
}

Very cool. Just needing to resize that and I'm good to go. Thanks so much for your help.