How do you scroll the page content over a cover image (like medium.com)?

Question

I want to try to replicate the cover image's scroll effect found on medium.com (example: http://medium.com/@ev). As you scroll down the page, the cover photo stays fixed and the content scrolls over it, covering it up as you go. Does anyone know how to do this with CSS?

Thanks!

Answer 1

you can do this very simply by setting the background image on a body as fixed and then using a div with no color/image as a header.

body{
    background: url("image.JPG") no-repeat top center fixed;
    background-size: cover;
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}

JSFIDDLE

UPDATE

A better solution is to add it directly to the container you are targeting rather than the body. In this case it's the header

.header{
   background: url("http://upload.wikimedia.org/wikipedia/commons/8/86/Jefferson_Park_in_Chicago.JPG") no-repeat top center fixed;
   background-size: cover;
   height: 200px;
   width: 100%;
   margin: 0;
   padding: 0;
   color: white;
   text-align: center;
   font-size: 50px;
} 

The results are identical but this way you don't need a container with a background color to cover up the image like the previous solution

NEW FIDDLE