1

I'm trying to setup a full page background image using the following in the css file

html { 
    background: url(images/background.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

Although it does appear nicely, it appears only below of anything appearing in the main body (e.g. footer)

Any help would be appreciated Regards, loaannis

neophyte
  • 6,540
  • 2
  • 28
  • 43
Ioannis
  • 48
  • 1
  • 5

1 Answers1

1

Perhaps you didn't set your div's right: Here I have a sample code for you including a "main-content" div and a "footer" div inside the "body" tag:

HTML:

<body>
    <div id="main-content">
        <p>1234 testing 1234</p>
        <p>main content goes here</p>
        <p>4321 testing 4321</p>
    </div>
    <div id="footer">
        <p>Contact information here</p>
    </div>

</body>

and this is the CSS with an extra line determining the footer color (for better visibility):

body { 
background: url("http://www.neyralaw.com/wp-content/uploads/2012/07/tokyo-blue-background-4547.jpg") no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#main-content {color:yellow;}
#footer {position:absolute; bottom:0; color:white;}

Notice that, for better visibility I have replaced your local image url with an image I found on the internet. Of course any image url will show correctly. I have also replaced the "html" with "body" in the css. Since the "body" is what it is actually "shown" I don't see why you should style the "html". However, even if body is replaced with html in the css, it still works fine!

Demo here: http://jsfiddle.net/Ee74C/4/

Happy coding,

Thodoris

Theo Orphanos
  • 1,417
  • 1
  • 19
  • 27
  • Thank you for your feedback. The "body" did the trick. For pedagogical reasons, shouldn't "html" work just as fine? – Ioannis May 13 '14 at 10:18
  • @Ioannis Some browsers such as IE (8, 9) might ignore head styling. As I usually always prefer to style the body I cannot provide you with specific differences between styling html or body. However, I think you might find this article useful: http://stackoverflow.com/questions/8958458/css-styling-body-element-vs-styling-html-element Καλή συνέχεια! – Theo Orphanos May 13 '14 at 11:53