0

If I try to set a background image for <html> to be centered and top and for <body> to be centered and bottom it doesn't work and only <html> background is shown.

Is this in every browser or not?

Derfder
  • 3,204
  • 11
  • 50
  • 85
  • Yes, it's supported by every browser that implements CSS2.1. If your body background isn't displaying, something else is wrong. For example, if there's no content, then the body box simply won't draw. But with a question like this, all you're going to get is handwaving. – BoltClock Apr 10 '13 at 09:38

3 Answers3

1

You can use CSS3 to achieve this using multiple backgrounds. Something like:

body {
  background-image: url(bg1.png), url(bg2.png);
  background-position: center top, center bottom;
}

If not, make sure your body and html are 100% height, or at least have a min-height of 100%.

pzin
  • 4,200
  • 2
  • 28
  • 49
0

The <html> tag is the document root and wasn't really intended to be visible or have CSS properties applied to. CSS spec 2.1 does define the <html> to have a box-model, but I still wouldn't rely on it.

You can either set multiple backgrounds with CSS3, or create an additional (absolute or fixed) <div> like so:

HTML

<body>
    <div id="container">
         <!-- your usual content -->
    </div>
    <div id="bg"></div>
</body>

CSS

body { background-image: url(...); }

#bg {
    background-image: url(...);
    float: left; /* body overflow fix */
    left: 0;
    position: absolute;
    top: 0;
    height: 100px; /* height of your background */
    width: 100%;
    z-index: -1000;
}
Tim S.
  • 13,597
  • 7
  • 46
  • 72
  • I have big backgrounds. fixed is not sulution for me. – Derfder Apr 10 '13 at 09:29
  • 1
    "Theoretically, the `html` tag isn't even a real display object, but often the CSS rules applies to the `html` tag are applied to the `body` instead." No, CSS rules applying to `html` get moved to the viewport, and rules applying to `body` get moved to `html`. And even then, not all rules do; only `overflow` and `background-*` come to mind. Unless by "theoretically" you mean in terms of HTML, in which case that's probably an inherent conflict with implementing HTML and CSS. – BoltClock Apr 10 '13 at 09:29
  • @Derfder Then set `position: absolute;`. – Tim S. Apr 10 '13 at 09:30
  • @BoltClock I've changed the description to make it more truthy. – Tim S. Apr 10 '13 at 09:32
  • but how do you set height and width for bg? – Derfder Apr 10 '13 at 09:34
  • Apply more styles to '#bg', like 'width' and 'height'. – Tim S. Apr 10 '13 at 09:34
  • That sounds better, but if you're working with CSS then you *can* rely on styling ``, because the CSS spec says that the document root must generate a box, and since the document root is represented by a root element, it must be able to accept CSS rules. – BoltClock Apr 10 '13 at 09:35
  • No, it;s not working if you have scrollable content. it's always on the bottom of the screen if I set bottom: 0. I tried fixed and absolute for position too, but it's bad. – Derfder Apr 10 '13 at 09:37
  • @Derfder: If you don't want to make things difficult for the answerers I suggest you edit your question to tell us exactly what you're doing. Otherwise my answer would have more than sufficed ("is this supported across browsers?" "Yes it is."). – BoltClock Apr 10 '13 at 09:40
  • O, I will add more info soon – Derfder Apr 10 '13 at 09:42
0

Use different image for both and add height:100%

html{
    background:url(https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTNxe5UjGfVsd1EpdEtrrlGDhjEO2VMFoIY9SGRCuBd4qAr9XhcCQ) top center no-repeat;
    height:100%
}
body{
    background:url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRqQ6g5bisPWccunUGGItC09wa1kgcc5X-rEEGGdEoWEwqUCnuZ) bottom center no-repeat;
        height:100%
}

DEMO

Sowmya
  • 26,684
  • 21
  • 96
  • 136