Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>For a simple semi-transparent background color, the above solutions (CSS3 or bg images) are the best options. However, want to do something fancier (e.g. animation, multiple backgrounds, etc.), or if you don't want to rely on CSS3, you can try the “pane technique”:</p> <pre class="lang-css prettyprint-override"><code>.pane, .pane &gt; .back, .pane &gt; .cont { display: block; } .pane { position: relative; } .pane &gt; .back { position: absolute; width: 100%; height: 100%; top: auto; bottom: auto; left: auto; right: auto; } .pane &gt; .cont { position: relative; z-index: 10; } </code></pre> <pre class="lang-html prettyprint-override"><code>&lt;p class="pane"&gt; &lt;span class="back" style="background-color: green; opacity: 0.6;"&gt;&lt;/span&gt; &lt;span class="cont" style="color: white;"&gt;Hello world&lt;/span&gt; &lt;/p&gt; </code></pre> <p>The technique works by using two “layers” inside of the outer pane element:</p> <ul> <li>one (the “back”) that fits the size of the pane element without affecting the flow of content,</li> <li>and one (the “cont”) that contains the content and helps determine the size of the pane.</li> </ul> <p>The <code>position: relative</code> on pane is important; it tells back layer to fit to the pane's size. (If you need the <code>&lt;p&gt;</code> tag to be absolute, change the pane from a <code>&lt;p&gt;</code> to a <code>&lt;span&gt;</code> and wrap all that in a absolutely-position <code>&lt;p&gt;</code> tag.)</p> <p>The main advantage this technique has over similar ones listed above is that the pane doesn't have to be a specified size; as coded above, it will fit full-width (normal block-element layout) and only as high as the content. The outer pane element can be sized any way you please, as long as it's rectangular (i.e. inline-block will work; plain-old inline will not).</p> <p>Also, it gives you a lot of freedom for the background; you're free to put really anything in the back element and have it not affect the flow of content (if you want multiple full-size sub-layers, just make sure they also have position: absolute, width/height: 100%, and top/bottom/left/right: auto).</p> <p>One variation to allow background inset adjustment (via top/bottom/left/right) and/or background pinning (via removing one of the left/right or top/bottom pairs) is to use the following CSS instead:</p> <pre class="lang-css prettyprint-override"><code>.pane &gt; .back { position: absolute; width: auto; height: auto; top: 0px; bottom: 0px; left: 0px; right: 0px; } </code></pre> <p>As written, this works in Firefox, Safari, Chrome, IE8+, and Opera, although IE7 and IE6 require extra CSS and expressions, IIRC, and last time I checked, the second CSS variation does not work in Opera.</p> <p>Things to watch out for:</p> <ul> <li>Floating elements inside of the cont layer will not be contained. You'll need to make sure they are cleared or otherwise contained, or they'll slip out of the bottom.</li> <li>Margins go on the pane element and padding goes on the cont element. Don't do use the opposite (margins on the cont or padding on the pane) or you'll discover oddities such as the page always being slightly wider than the browser window.</li> <li>As mentioned, the whole thing needs to be block or inline-block. Feel free to use <code>&lt;div&gt;</code>s instead of <code>&lt;span&gt;</code>s to simplify your CSS.</li> </ul> <hr> <p>A fuller demo, showing off the flexiblity of this technique by using it in tandem with <code>display: inline-block</code>, and with both <code>auto</code> &amp; specific <code>width</code>s/<code>min-height</code>s:</p> <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>.pane, .pane &gt; .back, .pane &gt; .cont { display: block; } .pane { position: relative; width: 175px; min-height: 100px; margin: 8px; } .pane &gt; .back { position: absolute; z-index: 1; width: auto; height: auto; top: 8px; bottom: 8px; left: 8px; right: 8px; } .pane &gt; .cont { position: relative; z-index: 10; } .debug_red { background: rgba(255, 0, 0, 0.5); border: 1px solid rgba(255, 0, 0, 0.75); } .debug_green { background: rgba(0, 255, 0, 0.5); border: 1px solid rgba(0, 255, 0, 0.75); } .debug_blue { background: rgba(0, 0, 255, 0.5); border: 1px solid rgba(0, 0, 255, 0.75); }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p class="pane debug_blue" style="float: left;"&gt; &lt;span class="back debug_green"&gt;&lt;/span&gt; &lt;span class="cont debug_red"&gt; Pane content.&lt;br/&gt; Pane content. &lt;/span&gt; &lt;/p&gt; &lt;p class="pane debug_blue" style="float: left;"&gt; &lt;span class="back debug_green"&gt;&lt;/span&gt; &lt;span class="cont debug_red"&gt; Pane content.&lt;br/&gt; Pane content.&lt;br/&gt; Pane content.&lt;br/&gt; Pane content.&lt;br/&gt; Pane content.&lt;br/&gt; Pane content.&lt;br/&gt; Pane content.&lt;br/&gt; Pane content.&lt;br/&gt; Pane content. &lt;/span&gt; &lt;/p&gt; &lt;p class="pane debug_blue" style="float: left; display: inline-block; width: auto;"&gt; &lt;span class="back debug_green"&gt;&lt;/span&gt; &lt;span class="cont debug_red"&gt; Pane content.&lt;br/&gt; Pane content. &lt;/span&gt; &lt;/p&gt; &lt;p class="pane debug_blue" style="float: left; display: inline-block; width: auto; min-height: auto;"&gt; &lt;span class="back debug_green"&gt;&lt;/span&gt; &lt;span class="cont debug_red"&gt; Pane content.&lt;br/&gt; Pane content. &lt;/span&gt; &lt;/p&gt;</code></pre> </div> </div> </p> <p>And here's a <a href="http://christmas-card-2009.slippyd.com/?f=s&amp;n=RXhhbXBsZSBmb3IgdGhlIFN0YWNrIE92ZXJmbG93IENvbW11bml0eQ%3D%3D%0A&amp;sn=T3ZlcmZsb3dpYW5z%0A" rel="noreferrer">live demo</a> of the technique being used extensively:</p> <p><a href="http://christmas-card-2009.slippyd.com/?f=s&amp;n=RXhhbXBsZSBmb3IgdGhlIFN0YWNrIE92ZXJmbG93IENvbW11bml0eQ%3D%3D%0A&amp;sn=T3ZlcmZsb3dpYW5z%0A" rel="noreferrer"><img src="https://i.stack.imgur.com/BoDSo.png" alt="christmas-card-2009.slippyd.com screenshot"></a></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