Body background colour

Discussion in 'HTML' started by Tim Streater, Mar 10, 2011.

  1. Tim Streater

    Tim Streater Guest

    I have a page with the body background-color set to non-white. The last
    div on the page is used as a footer, and I've set its background to
    white.

    Now, if the page as a whole has insufficient material in it to fill the
    browser window, then that part of the window below the final div takes
    the colour of the body's background-color.

    How can I control the colour of that portion of the browser window (I'd
    like it to be white)?

    --
    Tim

    "That excessive bail ought not to be required, nor excessive fines imposed,
    nor cruel and unusual punishments inflicted" -- Bill of Rights 1689
     
    Tim Streater, Mar 10, 2011
    #1
    1. Advertising

  2. Tim Streater

    dorayme Guest

    In article
    <>,
    Tim Streater <> wrote:

    > I have a page with the body background-color set to non-white. The last
    > div on the page is used as a footer, and I've set its background to
    > white.
    >
    > Now, if the page as a whole has insufficient material in it to fill the
    > browser window, then that part of the window below the final div takes
    > the colour of the body's background-color.
    >
    > How can I control the colour of that portion of the browser window (I'd
    > like it to be white)?


    First suggestion is to be happy to set the background of the
    footer to the same as the background to the viewport (set by html
    or body bg) and to choose a nice contrasting color for the text.

    Of course, everything depends on your design as a whole, but
    generally, without knowing specifics, this looks better too. A
    footer is something that is *apart* from all else and leaving it
    on the viewport at the bottom with a nice readable color lends
    itself to this separateness.

    However, if something about your design makes it better for the
    main content area or non-footer area to be white backgrounded I
    can imagine that it is because you want something from above (for
    example, a main content wrapper, with white background) to extend
    further than it does and to *meet* the footer in a vertical sort
    of way. And maybe your footer is a sticky one that keeps to the
    bottom?

    Or the footer to be just under but married in appearance by
    background to the content. The latter should not be difficult,
    the footer can safely be given a small height or padding. This
    might solve your problem with little effort, but the footer
    begins where the non-footer ends in this case. This is almost
    always fine imo and much less trouble than trying to force
    footers to the bottom of viewports.

    Normally a div will have as much height as its content dictates
    but you can change this behaviour by giving a height. Often a
    specific heigh in px or ems is not what is wanted but you can
    give it a percentage height. Everything depends, and with no url,
    I merely remark that if the wrapper somehow goes from the top and
    you want it to go to the or nearly the bottom, regardless of
    viewport, you can give 100% height (remembering to tell the
    browser what it is a percentage of (you need to set html and body
    too).

    --
    dorayme
     
    dorayme, Mar 11, 2011
    #2
    1. Advertising

  3. Tim Streater

    Tim Streater Guest

    In article <>,
    dorayme <> wrote:

    > Normally a div will have as much height as its content dictates
    > but you can change this behaviour by giving a height. Often a
    > specific heigh in px or ems is not what is wanted but you can
    > give it a percentage height. Everything depends, and with no url,
    > I merely remark that if the wrapper somehow goes from the top and
    > you want it to go to the or nearly the bottom, regardless of
    > viewport, you can give 100% height (remembering to tell the
    > browser what it is a percentage of (you need to set html and body
    > too).


    This is where I'm at so far (still a lot to do here):

    <http://www.clothears.org.uk>

    Looking better but now there are unwanted scroll bars :-(

    I'm using the pale blue background just to soften things up a bit.

    --
    Tim

    "That excessive bail ought not to be required, nor excessive fines imposed,
    nor cruel and unusual punishments inflicted" -- Bill of Rights 1689
     
    Tim Streater, Mar 11, 2011
    #3
  4. Tim Streater wrote:

    > This is where I'm at so far (still a lot to do here):
    >
    > <http://www.clothears.org.uk>
    >
    > Looking better but now there are unwanted scroll bars :-(


    Remove the height and width attributes from the CSS for div.footer
    Not necessary. In fact, this following seems to work quite well.

    div.footer {
    margin: 3em auto 0 auto;
    background-color: white;
    border: black solid 1px;
    text-align: center;
    }

    Change all your use of pixels in the CSS to percentages and em units.
    Use pixels only for borders and actual image sizes. See:
    http://tekrider.net/html/fontsize.php

    > I'm using the pale blue background just to soften things up a bit.


    Normally a good idea; bright white can be too sharp on the eyes. I
    frequently use something like: background-color: #f5f5f5;

    --
    -bts
    -Four wheels carry the body; two wheels move the soul
     
    Beauregard T. Shagnasty, Mar 11, 2011
    #4
  5. Tim Streater

    Tim Streater Guest

    In article <ildab0$m7s$-september.org>,
    "Beauregard T. Shagnasty" <> wrote:

    > Tim Streater wrote:
    >
    > > This is where I'm at so far (still a lot to do here):
    > >
    > > <http://www.clothears.org.uk>
    > >
    > > Looking better but now there are unwanted scroll bars :-(

    >
    > Remove the height and width attributes from the CSS for div.footer
    > Not necessary. In fact, this following seems to work quite well.
    >
    > div.footer {
    > margin: 3em auto 0 auto;
    > background-color: white;
    > border: black solid 1px;
    > text-align: center;
    > }


    True except that my original issue remains.

    > Change all your use of pixels in the CSS to percentages and em units.
    > Use pixels only for borders and actual image sizes. See:
    > http://tekrider.net/html/fontsize.php


    Thanks for the pointer.

    --
    Tim

    "That excessive bail ought not to be required, nor excessive fines imposed,
    nor cruel and unusual punishments inflicted" -- Bill of Rights 1689
     
    Tim Streater, Mar 11, 2011
    #5
  6. Tim Streater wrote:

    > "Beauregard T. Shagnasty" wrote:
    >> Tim Streater wrote:
    >>> This is where I'm at so far (still a lot to do here):
    >>>
    >>> <http://www.clothears.org.uk>
    >>>
    >>> Looking better but now there are unwanted scroll bars :-(

    >>
    >> Remove the height and width attributes from the CSS for div.footer
    >> Not necessary. In fact, this following seems to work quite well.
    >>
    >> div.footer {
    >> margin: 3em auto 0 auto;
    >> background-color: white;
    >> border: black solid 1px;
    >> text-align: center;
    >> }

    >
    > True except that my original issue remains.


    What? Scrollbars for short content? <looks again>
    Remove completely:
    html {
    height: 100%;
    }

    Might as well remove it from body {} too. Doesn't seem to be necessary
    on your page at all.

    Use color codes instead of words. Most of those you've picked are not
    valid names (even if some browsers recognize them), such as AliceBlue.
    <http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=http%3A%2F%2Fwww.clothears.org.uk%2F>

    Here is a plethora of color codes:
    http://www.somacon.com/p142.php
    AliceBlue is: #F0F8FF;

    Remove the font-size from p .. it's redundant as p will inherit from
    body.

    >> Change all your use of pixels in the CSS to percentages and em units.
    >> Use pixels only for borders and actual image sizes. See:
    >> http://tekrider.net/html/fontsize.php

    >
    > Thanks for the pointer.


    Welcome.

    --
    -bts
    -Four wheels carry the body; two wheels move the soul
     
    Beauregard T. Shagnasty, Mar 11, 2011
    #6
  7. Tim Streater

    Tim Streater Guest

    In article <ildm80$8bs$-september.org>,
    "Beauregard T. Shagnasty" <> wrote:

    > Tim Streater wrote:
    >
    > > "Beauregard T. Shagnasty" wrote:
    > >> Tim Streater wrote:
    > >>> This is where I'm at so far (still a lot to do here):
    > >>>
    > >>> <http://www.clothears.org.uk>
    > >>>
    > >>> Looking better but now there are unwanted scroll bars :-(
    > >>
    > >> Remove the height and width attributes from the CSS for div.footer
    > >> Not necessary. In fact, this following seems to work quite well.
    > >>
    > >> div.footer {
    > >> margin: 3em auto 0 auto;
    > >> background-color: white;
    > >> border: black solid 1px;
    > >> text-align: center;
    > >> }

    > >
    > > True except that my original issue remains.

    >
    > What? Scrollbars for short content? <looks again>


    :)

    No, that on my home page (where at the moment there is not much
    content), that part of the viewport below the footer has the same colour
    as the body, which exercises me (I want it to be white).

    > Remove completely:
    > html {
    > height: 100%;
    > }
    >
    > Might as well remove it from body {} too. Doesn't seem to be necessary
    > on your page at all.


    Perhaps I misunderstood dorayme in that case.

    > Use color codes instead of words. Most of those you've picked are not
    > valid names (even if some browsers recognize them), such as AliceBlue.
    > <http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=http
    > %3A%2F%2Fwww.clothears.org.uk%2F>
    >
    > Here is a plethora of color codes:
    > http://www.somacon.com/p142.php
    > AliceBlue is: #F0F8FF;


    I'll check that out later.

    > Remove the font-size from p .. it's redundant as p will inherit from
    > body.


    Thanks again.

    --
    Tim

    "That excessive bail ought not to be required, nor excessive fines imposed,
    nor cruel and unusual punishments inflicted" -- Bill of Rights 1689
     
    Tim Streater, Mar 11, 2011
    #7
  8. Tim Streater

    Gus Richter Guest

    On 3/10/2011 6:57 PM, Tim Streater wrote:
    > I have a page with the body background-color set to non-white. The last
    > div on the page is used as a footer, and I've set its background to white.
    >
    > Now, if the page as a whole has insufficient material in it to fill the
    > browser window, then that part of the window below the final div takes
    > the colour of the body's background-color.
    >
    > How can I control the colour of that portion of the browser window (I'd
    > like it to be white)?



    Actually there is a point of understanding in order here. The whole page
    has the non-white background and the footer portion has a white
    background which is layered over the non-white one and now I believe
    you're requesting to have the portion below the footer changed to white.

    The proper way is to declare body to have a white background, wrap the
    content in a wrapper and declare the wrapper to have your non-white
    background.

    That way the whole page is white and the portion inside the wrapper is
    non-white layered on top of the white body.

    --
    Gus
     
    Gus Richter, Mar 11, 2011
    #8
  9. Tim Streater wrote:

    > "Beauregard T. Shagnasty" wrote:
    > [schnippety]
    >> What? Scrollbars for short content? <looks again>

    >
    > No, that on my home page (where at the moment there is not much
    > content), that part of the viewport below the footer has the same
    > colour as the body, which exercises me (I want it to be white).


    Hmm, <looks again> I don't see any AliceBlue below the footer here in my
    browser(s). That bottom border is flush against the bottom of my
    viewport. My window may be narrower than yours, around 850px. Though
    what Gus just said is a good strategy for making sure there is no
    AliceBlue down there.

    You should add a <br> after the word "therein" in the footer. It would
    center that "Website Hosted By" graphic, thus centering and balancing
    the look of things.

    --
    -bts
    -Four wheels carry the body; two wheels move the soul
     
    Beauregard T. Shagnasty, Mar 11, 2011
    #9
  10. Tim Streater

    Tim Streater Guest

    In article <ildtgb$v4i$-september.org>,
    Gus Richter <> wrote:

    > On 3/10/2011 6:57 PM, Tim Streater wrote:
    > > I have a page with the body background-color set to non-white. The last
    > > div on the page is used as a footer, and I've set its background to white.
    > >
    > > Now, if the page as a whole has insufficient material in it to fill the
    > > browser window, then that part of the window below the final div takes
    > > the colour of the body's background-color.
    > >
    > > How can I control the colour of that portion of the browser window (I'd
    > > like it to be white)?

    >
    > Actually there is a point of understanding in order here. The whole page
    > has the non-white background and the footer portion has a white
    > background which is layered over the non-white one and now I believe
    > you're requesting to have the portion below the footer changed to white.
    >
    > The proper way is to declare body to have a white background, wrap the
    > content in a wrapper and declare the wrapper to have your non-white
    > background.
    >
    > That way the whole page is white and the portion inside the wrapper is
    > non-white layered on top of the white body.


    Yes, thanks, and of course I should have thought of that myself. Life
    has too many notes at the moment.

    --
    Tim

    "That excessive bail ought not to be required, nor excessive fines imposed,
    nor cruel and unusual punishments inflicted" -- Bill of Rights 1689
     
    Tim Streater, Mar 11, 2011
    #10
  11. Tim Streater

    Tim Streater Guest

    In article <ile1lo$94j$-september.org>,
    "Beauregard T. Shagnasty" <> wrote:

    > Tim Streater wrote:
    >
    > > "Beauregard T. Shagnasty" wrote:
    > > [schnippety]
    > >> What? Scrollbars for short content? <looks again>

    > >
    > > No, that on my home page (where at the moment there is not much
    > > content), that part of the viewport below the footer has the same
    > > colour as the body, which exercises me (I want it to be white).

    >
    > Hmm, <looks again> I don't see any AliceBlue below the footer here in my
    > browser(s). That bottom border is flush against the bottom of my
    > viewport. My window may be narrower than yours, around 850px. Though
    > what Gus just said is a good strategy for making sure there is no
    > AliceBlue down there.


    Indeed and see my response to him, cheers.

    --
    Tim

    "That excessive bail ought not to be required, nor excessive fines imposed,
    nor cruel and unusual punishments inflicted" -- Bill of Rights 1689
     
    Tim Streater, Mar 11, 2011
    #11
  12. Tim Streater

    dorayme Guest

    In article
    <>,
    Tim Streater <> wrote:

    > In article <>,
    > dorayme <> wrote:
    >
    > > Normally a div will have as much height as its content dictates
    > > but you can change this behaviour by giving a height. Often a
    > > specific heigh in px or ems is not what is wanted but you can
    > > give it a percentage height. Everything depends, and with no url,
    > > I merely remark that if the wrapper somehow goes from the top and
    > > you want it to go to the or nearly the bottom, regardless of
    > > viewport, you can give 100% height (remembering to tell the
    > > browser what it is a percentage of (you need to set html and body
    > > too).

    >
    > This is where I'm at so far (still a lot to do here):
    >
    > <http://www.clothears.org.uk>

    ....
    > I'm using the pale blue background just to soften things up a bit.


    Fair enough, but given it is the content (excluding footer) and
    not the whole viewport generally that you want softer bg, body is
    not the first element that should be honoured with the nice blue
    you have chosen.

    Why? Because the body element only seems like a regular element
    in all respects, vertically ending, for example, where its
    content ends. But, counter-intuitively, the background
    instruction, with some exception, delivers colour to the
    viewport.

    Exception? The body element is a child of the html element. If
    the html element (at least in many generally compliant browsers)
    is given a background colour, the browser treats this as the
    preferred colour for its viewport (yes, where its bg is different
    to body's).

    This suggests an unorthodox, unstraightforward strategy for you:
    give the html element a soft bg.

    <http://dorayme.netweaver.com.au/backgroundAsignment.html>

    But straightforward and the thing that comes naturally to mind is
    simply to give the body a background you are happy the viewport
    to get, to give the content wrapper the blue you want and leave
    it at that.

    <http://dorayme.netweaver.com.au/backgroundAsignment2.html>

    --
    dorayme
     
    dorayme, Mar 12, 2011
    #12
  13. Tim Streater

    JJ Guest

    Beauregard T. Shagnasty wrote:

    > Change all your use of pixels in the CSS to percentages and em units.
    > Use pixels only for borders and actual image sizes. See:
    > http://tekrider.net/html/fontsize.php


    Good article but the consensus around here regarding font sizing makes
    me wonder how many of you actually work in commercial environments. I'm
    a frontend web developer for a large UK corporation, and do you know
    what would happen if we sent a website off for review with font sizes
    such as:

    body { font-size: 100%; }
    h1 { font-size: 175%; }
    h2 { font-size: 150%; }
    h3 { font-size: 135%; }
    h4 { font-size: 125%; }
    ..legalese { font-size: 85%; } ?

    Well, we'd have a bunch of higher-ups complaining about the fonts being
    too big, and about how the website looks nothing like the PSD's from the
    design agency they paid a huge amount of money for. And no amount of
    arguments like Poley's will make them happy with the 16px fonts they're
    seeing in their browser, especially in light of the fact that once the
    sites go live, they never have any significant complaints from the
    public about the useability of the websites.
     
    JJ, Mar 12, 2011
    #13
  14. JJ wrote:

    > Well, we'd have a bunch of higher-ups complaining about the fonts
    > being too big, and about how the website looks nothing like the PSD's
    > from the design agency they paid a huge amount of money for.


    Of course. That's because commercial web site appearance is mostly designed
    to please the advertizing department and some bosses inclined into listening
    to deeziners.

    Some sites may deviate from this because they actually asked their customers
    or measured the effects.

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
     
    Jukka K. Korpela, Mar 12, 2011
    #14
  15. Jukka K. Korpela wrote:

    > Some sites may deviate from this because they actually asked their
    > customers or measured the effects.


    My local newspaper (medium sized city) underwent an unneeded "upgrade"
    to their site a month ago. One of the senior editors-in-charge invited
    comments ("click here to email me"). So I did, noting numerous extreme
    shortcomings (but not including font size). No reply from her after two
    weeks. Sent a followup. Now two more weeks and still no reply, even
    after asking politely for one.

    None of my points were addressed so far... :-(

    --
    -bts
    -Four wheels carry the body; two wheels move the soul
     
    Beauregard T. Shagnasty, Mar 12, 2011
    #15
  16. JJ wrote:

    > Beauregard T. Shagnasty wrote:
    >
    >> Change all your use of pixels in the CSS to percentages and em units.
    >> Use pixels only for borders and actual image sizes. See:
    >> http://tekrider.net/html/fontsize.php

    >
    > Good article but the consensus around here regarding font sizing
    > makes me wonder how many of you actually work in commercial
    > environments.


    Probably not many, to be sure. The Company Line not preached here.

    > I'm a frontend web developer for a large UK corporation, and do you
    > know what would happen if we sent a website off for review with font
    > sizes such as:
    >
    > body { font-size: 100%; }
    > h1 { font-size: 175%; }
    > h2 { font-size: 150%; }
    > h3 { font-size: 135%; }
    > h4 { font-size: 125%; }
    > .legalese { font-size: 85%; } ?
    >
    > Well, we'd have a bunch of higher-ups complaining about the fonts
    > being too big, and about how the website looks nothing like the PSD's
    > from the design agency they paid a huge amount of money for. And no
    > amount of arguments like Poley's will make them happy with the 16px
    > fonts they're seeing in their browser,


    Have you advised them they need a new 'design agency?'

    Do they bring in testers? Real people with various degrees of vision
    problems? Unlikely, right? I don't know of any commercial company
    deeziners who do...

    > especially in light of the fact that once the sites go live, they
    > never have any significant complaints from the public about the
    > useability of the websites.


    My first thought would be (if the site doesn't have some unique content
    only available there and nowhere else) would be to start checking the
    counts of user access for declines after a few weeks.

    My advice to you is to continue to accept your paycheck and do what they
    tell you to do. Once you move on to designing sites for your *own*
    clients, you can begin to preach usability.

    --
    -bts
    -Four wheels carry the body; two wheels move the soul
     
    Beauregard T. Shagnasty, Mar 12, 2011
    #16
  17. Beauregard T. Shagnasty wrote:

    > Jukka K. Korpela wrote:
    >
    >> Some sites may deviate from this because they actually asked their
    >> customers or measured the effects.

    >
    > My local newspaper (medium sized city) underwent an unneeded "upgrade"
    > to their site a month ago. One of the senior editors-in-charge invited
    > comments ("click here to email me"). So I did, noting numerous extreme
    > shortcomings (but not including font size). No reply from her after
    > two weeks. Sent a followup. Now two more weeks and still no reply,
    > even after asking politely for one.


    I see. Yes, I have noticed, too, that sites asking for feedback so often
    tend to ignore it completely. So I should have written "asked for customer
    feedback and cared about it".

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
     
    Jukka K. Korpela, Mar 12, 2011
    #17
  18. Jukka K. Korpela wrote:

    > Beauregard T. Shagnasty wrote:
    >> Jukka K. Korpela wrote:
    >>> Some sites may deviate from this because they actually asked their
    >>> customers or measured the effects.

    >>
    >> My local newspaper (medium sized city) underwent an unneeded
    >> "upgrade" to their site a month ago. One of the senior
    >> editors-in-charge invited comments ("click here to email me"). So I
    >> did, noting numerous extreme shortcomings (but not including font
    >> size). No reply from her after two weeks. Sent a followup. Now two
    >> more weeks and still no reply, even after asking politely for one.

    >
    > I see. Yes, I have noticed, too, that sites asking for feedback so
    > often tend to ignore it completely. So I should have written "asked
    > for customer feedback and cared about it".


    More anecdotes: the above newspaper reports on "new businesses" a
    couple of times a month. "Citizens doing well" and so forth. Last fall,
    a new company was detailed - a startup web design company. Two
    twenty-something guys. A link to their site was given, so naturally I
    looked. It was horrible! Was just one page, with JavaScript swapping
    out 'content' so it looked like about five pages. And design-wise, was
    ugly.

    I wrote to them via the contact-us portion of page, politely listing
    shortcomings. No response. I wish I could remember the domain name...

    --
    -bts
    -Four wheels carry the body; two wheels move the soul
     
    Beauregard T. Shagnasty, Mar 12, 2011
    #18
  19. Tim Streater

    C A Upsdell Guest

    On 2011-03-10 18:57, Tim Streater wrote:
    > I have a page with the body background-color set to non-white. The last
    > div on the page is used as a footer, and I've set its background to white.
    >
    > Now, if the page as a whole has insufficient material in it to fill the
    > browser window, then that part of the window below the final div takes
    > the colour of the body's background-color.
    >
    > How can I control the colour of that portion of the browser window (I'd
    > like it to be white)?


    Try:

    html { background-color:#fff; }
     
    C A Upsdell, Mar 12, 2011
    #19
  20. Tim Streater

    Tim Streater Guest

    In article <IuMep.21402$>,
    "Jukka K. Korpela" <> wrote:

    > JJ wrote:
    >
    > > Well, we'd have a bunch of higher-ups complaining about the fonts
    > > being too big, and about how the website looks nothing like the PSD's
    > > from the design agency they paid a huge amount of money for.

    >
    > Of course. That's because commercial web site appearance is mostly designed
    > to please the advertizing department and some bosses inclined into listening
    > to deeziners.


    FYI: advertising is not spelt with a z.

    --
    Tim

    "That excessive bail ought not to be required, nor excessive fines imposed,
    nor cruel and unusual punishments inflicted" -- Bill of Rights 1689
     
    Tim Streater, Mar 12, 2011
    #20
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. John Doe

    Set the background colour of a grid

    John Doe, Oct 21, 2003, in forum: ASP .Net
    Replies:
    7
    Views:
    369
    Alvin Bruney
    Oct 22, 2003
  2. JezB
    Replies:
    9
    Views:
    362
    Curt_C [MVP]
    Apr 30, 2004
  3. Ali
    Replies:
    2
    Views:
    368
    Prateeksha Web Services
    Dec 23, 2003
  4. Dj Frenzy
    Replies:
    3
    Views:
    312
    Robert
    Feb 10, 2004
  5. jodleren
    Replies:
    2
    Views:
    203
    Thomas 'PointedEars' Lahn
    Jan 12, 2008
Loading...

Share This Page