how to set the background color of the whole page in css

StackOverflow https://stackoverflow.com//questions/9648910

Question

I am trying to set the background color of the page at yumdom.com to yellow.

I have tried the following and it fails: 

body{ background-color: yellow;} /*only a sliver under the header turns yellow.*/

#doc3{ background-color: yellow;} /*result same as above*/

#bd { background-color: yellow;} /*result same as above*/

#yui-main { background-color: yellow;} /*a rectangle turns yellow ending at where the content ends. I want this rectangle to extend all the way to the footer.*/

Also note that if in the developer tools in Chrome I highlight either one of the html elements above, I get only a certain portion of the page highlighted. A footer and the section below the content remain un-highlighted.

I want the yellow to fill the entire space between the header and the footer and leave no white space out.

Note that we are using YUI Reset, Fonts, and Grids CSS templates V 2.8.0r4

Many thanks!

Was it helpful?

Solution 5

I already wrote up the answer to this but it seems to have been deleted. The issue was that YUI added background-color:white to the HTML element. I overwrote that and everything was easy to handle from there.

OTHER TIPS

<html>
  <head>
    <title>
        webpage
      </title>
</head>
  <body style="background-color:blue;text-align:center">
    welcome to my page
    </body>
  </html>

The problem is that the body of the page isn't actually visible. The DIVs under have width of 100% and have background colors themselves that override the body CSS.

To Fix the no-man's land, this might work. It's not elegant, but works.

#doc3 {
    margin: auto 10px;
    width: auto;
    height: 2000px;
    background-color: yellow;
}

I've checked your source code and find to change to yellow you need to adds the yellow background color to : #left-padding, #right-padding, html, #hd, #main and #yui-main.

Hope it's what you wanted. See ya

enter image description here

The body's size is dynamic, it is only as large as the size of its contents. In the css file you could use: * {background-color: black} // All elements now have a black background.

or

html {background-color: black} // The page now have a black background, all elements remain the same.

Looks to me like you need to set the yellow on #doc3 and then get rid of the white that is called out on the #yui-main (which is covering up the color of the #doc3). This gets you yellow between header and footer.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top