Vertically scroll multiple background images within div along with text - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Image Text

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Image Text

Description

Vertically scroll multiple background images within div along with text

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <style>
.container {<!-- ww  w.ja  va2 s  .co  m-->
   position:relative;
   display:inline-block;
   width:100%;
   float:left;
}

.container .cover {
   position:fixed;
   display:inline-block;
   background-color:Chartreuse;
   z-index:11;
}

.container .cover.top {
   top:0;
   left:0;
   width:100%;
   height:121px;
}

.container .cover.right {
   top:0;
   right:0;
   width:100px;
   height:100%;
}

.container .cover.bottom {
   bottom:0;
   left:0;
   width:100%;
   height:121px;
}

.container .cover.left {
   top:0;
   left:0;
   width:501px;
   height:100%;
}

.container .bg-image {
   position:relative;
   display:inline-block;
   width:100%;
   height:401px;
   float:left;
}

.container .bg-image.one {
   background-color:yellow;
}

.container .bg-image.two {
   background-color:blue;
}

.container .bg-image.three {
   background-color:pink;
}

.container .text {
   position:absolute;
   display:inline-block;
   font-size:41px;
   color:OrangeRed;
   z-index:21;
}

.container .text.one {
   top:41px;
   left:51px;
}

.container .text.two {
   top:501px;
   left:51px;
}

.container .text.three {
   top:941px;
   left:51px;
}
</style> 
 </head> 
 <body translate="no"> 
  <div class="container"> 
   <div class="cover top"></div> 
   <div class="cover right"></div> 
   <div class="cover bottom"></div> 
   <div class="cover left"></div> 
   <div class="bg-image one"></div> 
   <div class="bg-image two"></div> 
   <div class="bg-image three"></div> 
   <p class="text one">Lorem </p> 
   <p class="text two">Lorem </p> 
   <p class="text three">Lorem </p> 
  </div>  
 </body>
</html>

Related Tutorials