CODEWITHSUNDEEP
css
Overmars
Overmars

Reputation: 101

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);
}

Upvotes: 0

Views: 684

Answers (3)

Jordonias
Jordonias

Reputation: 5848

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%;
}

Upvotes: 1

rlcabral
rlcabral

Reputation: 1546

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;
}

Upvotes: 0

Ben Cull
Ben Cull

Reputation: 9504

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;
}

Upvotes: 0

Related Questions