Why is the body background image covering the HTML tag background?

I have two images one is attached to the HTML(background) tag and is positioned bottom, left and repeat X. I have another background image attached to the body tag, that is positioned top left and开发者_如何学运维 also repeat X.

I noticed the Body is covering the html image. I am not sure if this is possible and I have tried searching but no solution.

Is there a way to make the body image stay under the html image?

This way the html (image attached to the background) is on top of the body (background) image?

html {
    background-repeat: repeat-x;
    background-position: left bottom;
    background-image: url(../graphics/main-background-image-x.png);
}

body {
    background-repeat: repeat-x;
    background-position: left top;
    background-image: url(../graphics/sub-background-image-x.png);
}

The site here achieved what I believe you are looking for by adding height: 100%; to both the body and html tags.

html{
    background-repeat: repeat-x;
    background-position: left bottom;
    background-image: url(../graphics/main-background-image-x.png);
    height: 100%;
}

body{
    background-repeat: repeat-x;
    background-position: left top;
    background-image: url(../graphics/sub-background-image-x.png);
    height: 100%;
}

It sounds like you just want:

html
{
    background:Transparent url(../graphics/sub-background-image-x.png) repeat-x left top;
    margin-bottom:1px;
}

body
{
    background:Transparent url(../graphics/main-background-image-x.png) repeat-x left bottom;
    margin-bottom:1px;
}

Try this:

html {
    background: url(../graphics/main-background-image-x.png) repeat-x left bottom transparent;
}

body {
    background: url(../graphics/sub-background-image-x.png) repeat-x left top transparent;
}