I have a design that has some images across the top 25% of the background then it is just a simple g开发者_如何转开发radient I can repeat for the rest.

What is the best approach to have the Images on the top, then fill out the rest of the page with the gradient?

I took this approach:

html{
    background: #cac2ac url("../img/body-bg.gif") repeat-y 50% 0;
}

body {
    text-align: center;
    font-family: Arial;
    line-height: 1;
    width: 100%;
    background: transparent url("../img/body-img-bg.jpg") no-repeat 50% 24px;
}

But in one implementation of the code the background image for HTML is not appearing?

Any help?

Contrary to what has been said, you can have a background for html.

Your approach is almost there, try this with height: 100% and min-height: 100%.

http://jsbin.com/omikuy

html, body {
    margin: 0;
    padding: 0;
}
html {
    background: #cac2ac url("../img/body-bg.gif") repeat-y 50% 0;
    height: 100%;
}
body {
    min-height: 100%;
    text-align: center;
    font-family: Arial;
    line-height: 1;
    width: 100%;
    background: transparent url("../img/body-img-bg.jpg") no-repeat 50% 24px;
}

Cross Browser, but not semantic

The most cross-browser solution would be to have a wrapper <div> around all content in the website, and then apply one background to it, and one to the body.

Less Cross Browser, but more semantic

You could also try using psuedo elements to apply one background:

body:after { background: .... }

Least Cross Browser, but most semantic

The most progressive way is to use multiple backgrounds in CSS3

body { background: url(...) top center, url(...) top center repeat-y }

The best way to do this would be to have the body background your gradient and just create a div for the images with the following class:

.div_bg {

position:absolute;
width:100%;
height:100px; (or whatever)
top:0px;
background-image:whatever; 
repeat:repeat-x;

}

And make sure HTMl has this (to elimate white space on top):

html {
margin: 0 auto;
}