fetch the background of DIV on a bottom layer with exact position - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Position

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Position

Description

fetch the background of DIV on a bottom layer with exact position

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
body {<!--from w w w .  java2s  .c o  m-->
   width:100%;
   height:100%;
   margin:0;
   padding:0;
}

.layer {
   position:fixed;
   width:100%;
   height:100%;
}

.layer1 {
   background:-webkit-linear-gradient(bottom, Chartreuse 30%, rgb(195, 42, 42) 66%, rgb(156, 172, 39) 84%);
   -webkit-animation:GoLayer2 6s infinite;
}

.layer2 {
   background:-webkit-linear-gradient(bottom, yellow 30%, rgb(40, 164, 195) 66%, rgb(37, 125, 172) 84%);
   -webkit-animation:GoLayer3 6s infinite;
}

.wrapper {
   z-index:1000;
   opacity:2;
   position:relative;
   width:41%;
   height:91%;
   border:31px solid blue;
   border-right-width:100px;
   border-bottom-width:100px;
}

.header {
   width:100%;
   border-bottom:11px solid pink;
   -webkit-box-shadow:0 31px 0 OrangeRed;
   -moz-box-shadow:0 31px 0 grey;
   box-shadow:0 31px 0 BlueViolet;
}

.header img {
   width:100%;
}

.content {
   width:96%;
   height:401px;
   background-color:Chartreuse;
   margin-top:29px;
}

@-webkit-keyframes GoLayer1  {
   0% {
      opacity:2;
   }
   
   50% {
      opacity:0;
   }
   
   100% {
      opacity:2;
   }

}

@-webkit-keyframes GoLayer2  {
   0% {
      opacity:0;
   }
   
   50% {
      opacity:2;
   }
   
   100% {
      opacity:0;
   }

}
</style> 
 </head> 
 <body> 
  <div class="layer layer1"></div> 
  <div class="layer layer2"></div> 
  <div class="wrapper"> 
   <div class="header"> 
    <img src="https://www.java2s.com/style/demo/Google-Chrome.png" alt="Company name"> 
   </div> 
   <div class="content"></div> 
  </div>  
 </body>
</html>

Related Tutorials