Make div with position: absolute push down div

1 Views

I am trying to make a page with a background that scales to the browser width, regardless if the page is greater in height then the browser width, and then place content below the background.

I have achieved this with the background, but I had to use absolute positioning for it to work, so I am having a hard time figuring out how to push down the main container. So either a way to do that, or make the background follow the browser width without the use for absolute positioning.

Read More

Any ideas would be appreciated!

Sitelink

The css of the background div and the main container to be pushed down: 

#supersized {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
    z-index: -999;
    height: 100%;
    width: 100%;
}

#main-container {
    height: 100%;
    display: block;
    overflow: hidden;
}
Post Views: 1

Related posts

Leave a Reply

1 comment

  1. Place your main-container div just outside your container div. If you would like to then reduce the space between the content and the background, then you can replace your main-container css with something like this: 

    #main-container {
    height: 100%;
    margin-top: -45px;
}