2

I feel like this should be an easy answer but cant figure out how to achieve this effect.

Essentially i'm trying to do this: http://demo.smooththemes.com/theone/

one this site, when you start scrolling the image stays fixed and the content scrolls over top. Any ideas?

Thanks for you help.

1 Answer 1

1

example http://jsfiddle.net/gvMLS/

HTML

 <div id="header">
    </div>
    <div id="content">
        content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>
    </div>

CSS

#header {
position: fixed;
top: 0;
height: 20px;
width: 100%;
background-color: #ff0000;
}
#content {
position: absolute;
top: 20px;
bottom: 20px;
width: 100%;
background-color:#fff;
overflow: auto;
}
1
  • Thanks! I might not have explained that well enough though. I was referring to the background image of the computer behind the text "WE ARE THEONE AGENCY AND WE DO BRANDING & THEMES" and how it stays fixed whil the content below flows. Does that make sense? Sorry if im not explaining it correctly. Thanks for the quick response.
    – kdipaolo
    Oct 17, 2013 at 2:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.