Background color for below footer only (unknown height of area)

html css background-color

20,424

Solution 1

There's no consistent way to guarantee that every browser will fill the remaining background space to your satisfaction if you choose to go down the path of trying to use a new object of any sort to fill the space.

The only way to really guarantee the expanded section is the color you want is to set the background of body.

It's a bit like painting a wall - body's background is usually the first coat. (Unless you specify a background on html as per Carlo Cannas's answer below.)

The orange section is logically the 'second layer' it's a bit like a concert poster pasted on the wall around a building site. So if you want the orange to be full width, but have fixed width content within it, you need two containers, one at 100% width, and one within it at your chosen fixed width.

Trying to dance around the logic of layers and nesting won't help - it's like trying to create a Möbius strip. Following strict logic will give you much more confidence in different browsers.

+-----+--------------------------------------------+-----+
|     |                                            |     |  
|     |                                            |     | 
|     |                                            |     | 
|     |                                            |     | 
|     |                                            |     | 
|     |              Fixed Width                   |     |   <---  100% width
|     |                                            |     |         container
|     |           Content Container                |     |         (orange) 
|     |                                            |     | 
|     |                                            |     | 
|     |                                            |     | 
+-----+--------------------------------------------+-----+
|                                                        |
|                       footer                           |
|                       (white)                          |
|                                                        |
+--------------------------------------------------------+

             remaining white background page

Solution 2

Usually background set to the HTML body element becomes the background of the canvas, unless you specify a background different from transparent for the html element. So try to set the background color for the root element to white.

If your body has margins you may need to tweak them, in order to have the correct result.

Solution 3

It may be considered as a work-around, but it works for me:

html {
    background: #fff;
}

Before:

After:

20,424

Author by

Ivan Durst

Updated on July 09, 2022

Comments

Ivan Durst almost 2 years
I have a very simple predicament that I've never know the best answer to in all my years of developing:

There is a fixed-height container div, which also contains the footer (so no sticky footer) with a background color of white. The footer is also a fixed height. The body contains a background image that fades to a color, lets say orange. On tall browsers, there will be space below the footer, which will also be the orange body color. How do I make just that space below the footer white, without affecting the body color above the footer?

Here's some example HTML:
```
<body>
<div class="container">
    Container Content
    <div class="footer">
        Footer Content
    </div>
</div>
</body>
```
and CSS:
```
body {
    background: #ffaa00 url(image.png) no-repeat;
}
.container {
    height: 1200px;
    margin: 0 auto;
    width: 960px;
}
.footer {
    background-color: #fff;
    height: 120px;
}
```
Example image (main content blurred per client request):

See the orange stripe below the white footer? I'd like that to be white. We never know what the height of that space is. Any suggestions? CSS solutions preferred, but jQuery might work too.
Ivan Durst over 10 years

The #ffaa00 background color has to stretch the full page width, not the width of the container
Kelu Thatsall over 10 years

Imo, if you don't want any of the background color to be visible on bottom, you just shouldn't set a background color of the body, but just put all the contents in divs.
Carlo Cannas over 10 years

This still has the problem of the example image.
Carlo Cannas over 10 years

You wrote body's background is always the first coat. Well, it isn't always true, give a look at my answer.
Tim Ogilvy over 10 years

That's fair, I have changed it to usually - I'm reasonably confident body has been the convention for the base layer since the earliest days of html. Setting a background on <html> would have to be a fairly recent wouldn't it?
Snade over 10 years

@IvanDurst the idea was different, but I did not tested it first and it was wrong anyway. Edited my comment, I think the best will be if the general structure is different.
Carlo Cannas over 10 years

I know it's odd and uncommon, however this rule exists since early days of CSS: give a look at the CSS1 specs (1996, not exactly recent, right?) w3.org/TR/REC-CSS1-961217.html#the-canvas.
Tim Ogilvy over 10 years

No worries, glad to help!
Neil over 6 years

Thanks a lot; worked like a charm; I particularly like your "first coat" analogy.