How can I add a second overlay image to the whole page body?

I have a large image visible for the whole page (every page the same image) as a background image, but would like an overlay image on top of this to give a styled image effect (a transparent png with a few dots). The way I would normally do this is have a div within the body tag, so the body has the main image and the div has the small dotted image repeated across the whole page (width and height), however I can’t seem to get the div to extend beyond the header.php file’s influence – WordPress seems to insert a closing div tag where I don’t want it (I added the closing div in footer.php).

Not much by way of code to look at and I’m working locally. I am using header.php, footer.php, index.php, page-with-sidebar.php, style.css, functions.php in a custom theme.

Is there some trick to this, is it possible, what can I do to achieve this please?