CODEWITHSUNDEEP
htmlcss
Ghozt
Ghozt

Reputation: 267

How would I go about creating a div that filled the whole screen, with content under it

Here is an example of what im looking at doing. http://www.childrens2012.org/

Sort of background image/colour that fills the entire screen regardless of size, however when you scroll down you have more content.

I got it working for colours

#tester{
    width:100%;
    height:100%;
    background-color: blue;}

However when I tired to use a background image i keep running into trouble if i position it absoulte then the content below comes up and it just doesnt seem to work.

here is what ive got 

width:100%;
height:100%;
background: url(../images/bg.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
 background-size: cover;
 position:absolute;

any ideas?

Upvotes: 1

Views: 75

Answers (2)

muma
muma

Reputation: 345

I'm not sure what you want to achieve. The given example and your example code differ from handling the image.

To give you another solution:

#tester{ margin-top: 100% }

Upvotes: 0

sachleen
sachleen

Reputation: 31121

Here's a question: height:100%.. 100% of what?

Add this:

body, html {
  height:100%;
}

and it should work.

http://jsbin.com/evifeh/1/edit

Upvotes: 1

Related Questions