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.
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.
So the question is,
How can I keep the backgrounds relative inside the #wrap2 div with CSS when the #wraps are toggled?
I need this to work in IE8 and above.
Here is the CSS:
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;}
Here is the code:
<div id="wrap1">hello one</div>
<div id="wrap2">hello two<button id="showcontact">show</button>
<div id="bg1">hi div1</div>
<div id="bg2">hi div2</div>
<div id="bg3">hi div3</div>
<div id="logo">logo</div>
</div>
Here is the jQuery:
$("#showcontact").click(function () {
$("#wrap1").toggle();
});
Thanks