Text scrolling in transparent header html css - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Header

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Header

Description

Text scrolling in transparent header html css

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.j  a v a  2s .co  m-->
   color:white;
}
header {
   background: url(https://www.java2s.com/style/demo/Google-Chrome.png);
   position:fixed;
}
li {
   float:left;
   list-style:none;
   margin:0 20px 0 20px;
}
a {
   text-decoration:none;
   color:red;
   font-size:50px;
}
.bg {
   width:100%;
   height:100% auto;
   background: url(https://www.java2s.com/style/demo/Google-Chrome.png);
   margin-top: -20px;
}
#a{
   margin-top:100px;
   position:fixed;
   overflow:scroll;
   height:100%;
   width:auto;
}
p {
   margin:20px 20px 20px 20px;
   font-size:30px;
   padding-top:100px;
}


      </style> 
 </head> 
 <body> 
  <header> 
   <ul> 
    <li> <a href="#1">one</a> </li> 
    <li> <a href="#2">two</a> </li> 
    <li> <a href="#3">three</a> </li> 
   </ul> 
  </header> 
  <div id="a" class="bg"> 
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce placerat sapien eget ligula egestas, quis aliquam velit varius. Phasellus mollis mollis sem quis porttitor. Pellentesque scelerisque mauris et magna tincidunt, vel pharetra enim pharetra. Duis a lobortis purus. Sed dignissim fermentum nibh convallis eleifend. In quis interdum arcu. Proin interdum, lorem et luctus laoreet, felis purus pharetra turpis, eu egestas justo ligula in lectus. Morbi vitae libero vel velit posuere luctus at eu diam. Duis tincidunt lectus ut lobortis euismod. Vivamus ultrices tristique sapien eget posuere.</p> 
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce placerat sapien eget ligula egestas, quis aliquam velit varius. Phasellus mollis mollis sem quis porttitor. Pellentesque scelerisque mauris et magna tincidunt, vel pharetra enim pharetra. Duis a lobortis purus. Sed dignissim fermentum nibh convallis eleifend. In quis interdum arcu. Proin interdum, lorem et luctus laoreet, felis purus pharetra turpis, eu egestas justo ligula in lectus. Morbi vitae libero vel velit posuere luctus at eu diam. Duis tincidunt lectus ut lobortis euismod. Vivamus ultrices tristique sapien eget posuere.</p> 
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce placerat sapien eget ligula egestas, quis aliquam velit varius. Phasellus mollis mollis sem quis porttitor. Pellentesque scelerisque mauris et magna tincidunt, vel pharetra enim pharetra. Duis a lobortis purus. Sed dignissim fermentum nibh convallis eleifend. In quis interdum arcu. Proin interdum, lorem et luctus laoreet, felis purus pharetra turpis, eu egestas justo ligula in lectus. Morbi vitae libero vel velit posuere luctus at eu diam. Duis tincidunt lectus ut lobortis euismod. Vivamus ultrices tristique sapien eget posuere.</p> 
  </div>  
 </body>
</html>

Related Tutorials