text scrolling in tranparent header html css - html

Question

I'm using a transparent header for my website with a scrollable background. But i want to make the content 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;
}
Thanks

Answer 1

I don't think that this works exactly the way you want but this is one of the option that i found you can put your text in a div and give it position:fixed and then give it overflow:scroll; that way you can maintain the position of your header but this doesn't work if the page is scrolled http://jsfiddle.net/yw0w4d3p/9/
#a{
margin-top:100px;
position:fixed;
overflow:scroll;
height:100%;
width:auto;
}

Answer 2

Take a look at this example, it may help you out!
You can use position:absolute and overflow:auto to get the result.
Demo

Answer 3

Well, if you can use fixed background it's not a big deal, but if u want it to be scrollable background then I don't think u can make it work without some kind of a javascript here and since all the answers use fixed background-attachment, here is my shot. Header is not transparent but uses same background as the .bg block
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>one
</li>
<li>two
</li>
<li>three
</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>

Answer 4

Set background color for header. you can set width as you want and you decrease opacity if you want (opacity:0.8).
header {
position: fixed;
width: 100%;
background-color: white;
opacity: 1;
}