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

Tags: html,css,jquery-ui-css-framework

Problem :

I am trying to set the background color of the page at 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!

Solution :

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 over wrote that and everything was easy to handle from there.

    CSS Howto..

    How can I arrange for a horizontal scroll bar on overflow with flexbox items?

    How can I absolutely position a block of multi-line text relative to the bottom of the last line?

    How to write this 'OR' CSS selector?

    How to set the padding of QTableView cells through CSS?

    How to undo CSS change after clicking on another link

    Understanding float and how and when to float an element in CSS3?

    How to change css properties on hover parent element?

    How to check a website in BlackBerry Simulator

    How to CSS style angular directive?

    How do I change the Default Design? [closed]

    CSS/XHTML: Show div after a specific count of table rows

  • by jQuery
  • How to Paginate Footnotes Properly in CSS & HTML (Print Media)

    Resolved - CSS of Blank Theme Does NOT Show My Edits - Why?

    How can I avoid div from executing new line if one line is already full?

    How to remove all pseudo selectors from a CSS selector string using Javascript?

    CSS: How to crop image that has any size?

    How to make a full width image responsive

    How to specify an element to re-appear after a page break?

    CSS How to multiple background + gradient?

    How to create an highlight animation when a control gets focused [closed]

    How to use font-family with same name?

    How can I set the width of something in jquery based on variables?

    css - how to determine why a particular css rule is being overwritten

    How to make rollover images in CSS using multiple image backgrounds and :hover pseudo

    How to convert a 'div' into a dropdown using CSS/Jquery

    How to get CSS to select ID of specific pattern? [duplicate]

    How to create a CSS style which override another CSS style

    How to get a frame off animated png using CSS?

    How to make sidebar always visible in the Semantic UI