Scrolling text in tranparent header html css
I am using a transparent header for my website with a scrollable background. But I want the content to disappear below the header. please find my code here http://jsfiddle.net/prta/yw0w4d3p/1/ . Any help is appreciated.
CSS
body {
color:white;
}
header {
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(http://southerngaragebands.com/Aero_Woods.jpg);
margin-top: -20px;
}
p {
margin:20px 20px 20px 20px;
font-size:30px;
padding-top:100px;
}
thank
source to share
I don't think it works exactly the way you want, but this is one of the options I found, you can put your text in a div and give it position:fixed
and then give it overflow:scroll;
that way, can support the position of your title, but this doesn't work if the page scrolls http://jsfiddle.net/yw0w4d3p/9/
#a{
margin-top:100px;
position:fixed;
overflow:scroll;
height:100%;
width:auto;
}
source to share
Well, if you can use a fixed background it doesn't really matter, but if you want it to be a scrollable background, I don't think you can get it to work without any javascript here, and since all the answers use fixed
background-attachment
, here my shot. The header is not transparent
, but uses the same background as the block.bg
http://jsfiddle.net/yw0w4d3p/18/
body {
color:white;
margin: 0 auto;
}
header {
position:fixed;
background: url("http://southerngaragebands.com/Aero_Woods.jpg") repeat fixed 0 0 rgba(0, 0, 0, 0);
width: 100%;
}
li {
float:left;
list-style:none;
margin:0 20px 0 20px;
}
a {
text-decoration:none;
color:red;
font-size:50px;
}
.bg {
background: url("http://southerngaragebands.com/Aero_Woods.jpg") repeat fixed 0 0 rgba(0, 0, 0, 0);
margin-top: -20px;
width: 100%;
}
p {
margin:20px 20px 20px 20px;
font-size:30px;
padding-top:100px;
}
<header>
<ul>
<li><a href="#one">one</a>
</li>
<li><a href="#two">two</a>
</li>
<li><a href="#three">three</a>
</li>
</ul>
</header>
<div id="one" 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>
</div>
<div id="two" 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>
</div>
<div id="three" 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>
</div>
source to share