Question

I’m busy with creating a website that preferably needs to have a background picture that covers the whole screen but when the visitor scrolls down other content appears.

So far I got this working with creating 2 div’s (which I call #container_page1 and #container_page2). This is the css of the first div:

#container_page1 { 
    background-image:url(images/background.jpg); 
    background-size: cover;
    position:absolute;
    margin:0px;
    width:100%;
    height:100%;
}

This is the css of the second div:

#container_page2 {
    background-color: #F00;
    height: 2000px;
    width: 1000px;
    margin-right: auto;
    margin-left: auto;
}

The problem is that the content of the second div appears underneath the first div, obviously caused by the fact that the first div is absolute positioned.

Of course I could get the content of the second div to be placed lower with margin or padding but this won’t work nicely because of different screen resolutions.

Here you can see what I did so far: http://kmnew.kadushimarketing.com/index.php. You’ll also see the “learn more” button that links to an anchor in the second div.

Does anyone has a suggestion to get the second div starting where the first div ends?

Answer 1

If you need each section to have it’s own special background and be exactly the size of the browser, why do absolute position at all?

Using a style like:

body, html{
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}

section{
    width:100%;
    height:100%;
    background-image:url(images/background.jpg); 
    background-size: cover;
}

Then positioning all your content divs relative, you should be able to maintain browser-sized background and let the sections stack in order.

If you want to control the position of the section contents you could use a structure like:

<section>
    <div class="content">
        Section content goes here
    </div> 
</section>

With corresponding CSS:

section .content{
    width: 500px;
    margin:0 auto;
}

Which would fix the content to a width of 500px and center it on the screen. Hope this helps!