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!
This question is related to
html
css
jquery-ui-css-framework
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
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;
}
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.
<html>_x000D_
<head>_x000D_
<title>_x000D_
webpage_x000D_
</title>_x000D_
</head>_x000D_
<body style="background-color:blue;text-align:center">_x000D_
welcome to my page_x000D_
</body>_x000D_
</html>
_x000D_
Source: Stackoverflow.com