StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POPosition one full-document background image over another
text
Body
copied!<p>I'm aware that similar questions have been asked over and over, but I have yet to come across a solution that actually works for me. Picture the following problem.</p> <p>Situation:</p> <ul> <li>The body has a non-fixed background image that repeats both vertically and horizontally.</li> <li>There is supposed to be a second transparent background image laid over the first.</li> </ul> <p>Constraints:</p> <ul> <li>The second background is supposed to stretch across the document, just like the background on the body. Mind: Not just the viewport, the entire document.</li> <li>Even when the body height is smaller than the document height (i.e. no scrollbar), the second background must stretch to the bottom of the viewport (so any solution working with 100% html and/or body height is out of the question).</li> <li>The second background's position cannot be fixed, because that would cause some sort of parallax effect when scrolling. The illusion that both images are actually one must be upheld.</li> <li>It is possible for the body to have margin and/or padding. Both backgrounds should cover the entire document regardless.</li> <li>Using a second background image on the body ("<code>background-image: url(), url();</code>") is not an option for backward compatibility reasons.</li> <li>No JavaScript.</li> <li>No actually merging the two images into one, obviously. :)</li> </ul> <p>I have brooded over this problem for a while now and have gotten to the conclusion that this is impossible using only HTML and CSS2. I'd very much like to be proven wrong.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload