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

+3


source to share


4 answers


Set the background color for the title. you can set the width however you want and lower the opacity if you like (opacity: 0.8).



header {
    position: fixed;
    width: 100%;
    background-color: white;
    opacity: 1;
}

      

0


source


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;
}

      

0


source


Take a look at this example, it might help you! You can use position:absolute

and overflow:auto

to get the result.

Demo

0


source


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>
      

Run codeHide result


0


source







All Articles