Question

So I’ve got a page that shows an image with some absolutely positioned text on top of it.

I want to write a print style sheet for it so that:

1. the image is resized to fit the width of the page
2. the text is repositioned and resized to maintain relative position and size with the image behind it

So I know I can do (1) with just max-width: 100%, but I’m not sure how to accomplish (2). I’m okay with using some javascript if necessary, but I wanted to know if there’s a way to do this in pure CSS. If I do need to use javascript, what can I hook to check for the pixel width of the image in the printed page? Just use the calculated width as normal?

---

And yes, this question might be more appropriate for DocType, but I’ve yet to get any help over there.

Answer 1

My problem was that I had set overflow: auto in the main div, which was causing the contents to overflow the printed page.

To fix it, all I needed to do was set overflow: none.

The overflow: auto was what was making it print like

_{(source: github.com)}