StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I've used borders to simulate backgrounds when I really need a background color. Something like this will work (but I apologize for not having tested this):</p> <pre><code>div.must-have-background-for-print { position: relative; width: 400px; } div.must-have-background-for-print div.background { position: absolute; top: 0; left: 0; height: 100%; border-left: 400px solid #999; } </code></pre> <p>In response to @Steve Quezadas' comment, the idea is that rather than using a background, you insert an element into the element that needs the background and apply an extremely wide border to it so that it fills the outer element. This will most likely require that the contents of that element also are inside of another wrapper so that they appear above the new background element...</p> <p>If you started with this:</p> <pre><code><div class="has-background">Some stuff in here</div> </code></pre> <p>You might use this:</p> <pre><code><div class="has-background"> <div class="background" /> <div class="content">Some stuff in here</div> </div> </code></pre> <p>This is extremely ugly, but I've used it in the past and it does solve the issue of background colors not printing. And, before you ask, you'll have to adapt the css to your specific case. I'm simply describing the concept of using borders to replace backgrounds. Your implementation will depend on how your page is structured and this is extremely difficult to do if you don't have either fixed widths or heights on your elements.</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