Note that there are some explanatory texts on larger screens.

plurals
  1. POMultiple CSS background colors that is in parent
    primarykey
    data
    text
    <p>I have a website I am creating with several background-colors. I know I can do this with an image, but because I am creating a responsive site, I do not want to use an image.</p> <p>In the sample, you can see that the blue, red, green colors show up at the beginning. But when you click show, they disappear behind the orange layer, when toggled.</p> <p>So the question is, </p> <p>How can I keep the backgrounds relative inside the #wrap2 div with CSS when the #wraps are toggled?</p> <p>I need this to work in IE8 and above.</p> <p><a href="http://jsfiddle.net/webdott/MSZXa/" rel="nofollow">Here is the jsfiddle</a></p> <p>Here is the CSS:</p> <pre class="lang-css prettyprint-override"><code>body {margin:0;padding:0;background:#ccc;} #wrap1{width:100%;height:200px;postion:absolute;background:orange;display:none;} #wrap2{width:100%;height:200px;postion:absolute;} #bg1{width:100%;height:50px;background:#0099cc;position:absolute;z-index:-1;top:50px} #bg2{width:100%;height:50px;background:#990000;position:absolute;z-index:-1;top:100px} #bg3{width:100%;height:50px;background:#99cc00;position:absolute;z-index:-1;top:150px;} #logo{width:25%;height:100px;background:yellow;margin:2%;float:left;} </code></pre> <p>Here is the code:</p> <pre><code>&lt;div id="wrap1"&gt;hello one&lt;/div&gt; &lt;div id="wrap2"&gt;hello two&lt;button id="showcontact"&gt;show&lt;/button&gt; &lt;div id="bg1"&gt;hi div1&lt;/div&gt; &lt;div id="bg2"&gt;hi div2&lt;/div&gt; &lt;div id="bg3"&gt;hi div3&lt;/div&gt; &lt;div id="logo"&gt;logo&lt;/div&gt; &lt;/div&gt; </code></pre> <p>Here is the jQuery:</p> <pre><code>$("#showcontact").click(function () { $("#wrap1").toggle(); }); </code></pre> <p>Thanks</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

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