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

C

9

40

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!

Culture answered 10/3, 2012 at 18:12 Comment(0)

C

9

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.

Culture answered 15/3, 2012 at 4:26 Comment(0)

C

30

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.

Caltanissetta answered 23/12, 2015 at 18:56 Comment(0)

K

21

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

Kare answered 20/9, 2016 at 6:39 Comment(0)

C

9

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.

Culture answered 15/3, 2012 at 4:26 Comment(0)

T

6

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;
}

Tartrate answered 10/3, 2012 at 18:16 Comment(4)

Thanks! the issue is that there ends up being this no man's land, the area beneath the content all the way to the top of the footer, that does not belong to and can not be colored using any of these divs. – Culture 10/3, 2012 at 18:23

Thanks! But fixing the height causes the creation of a scroll bar. We have gone to great lengths to make sure the scroll bar never appears. – Culture 10/3, 2012 at 18:37

The problem turns out to be the footer that's absolutely positioned at the bottom. You MIGHT be able to set the height of the #doc3 to 100% if you move the footer to outside that block. It might not work, though. If you put it up on jsFiddle, I can play with it a little. You might also just be able to set overflow:hidden on the style I gave you. – Tartrate 10/3, 2012 at 18:44

Thanks. I moved the footer out of #doc3. And set the height of doc3 to 100%. doc3 still only fills up the size of its content. And the background-color of the body does not fill up the no man's land. I will try to see if I can make this to replicate in JSFiddle which is a task in itself. – Culture 10/3, 2012 at 19:9

T

4

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

Traumatize answered 13/3, 2012 at 8:55 Comment(0)

D

4

You have to apply it to body tag.

Shorthand:

body {
    background: black;
}

Single property:

body {
    background-color: black;
}

Here's a html: how to change background color tutorial on YouTube.

What other answers don't mention is that there are four ways to actually specify/change CSS:

External CSS (using <link> tag to add your CSS)
Internal CSS (type CSS between <style> tags)
Inline CSS (type style attribute directly inside HTML element.
With JavaScript: use document.querySelector("#id").style.backgroundColor = 'black' just make sure to type this code between <script> tags

Dorchester answered 19/3, 2021 at 4:36 Comment(1)

this answer was already given and does not target the specific problem from the question – Supercharger 19/3, 2021 at 6:57

T

0

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.

Trapshooting answered 10/3, 2012 at 19:5 Comment(0)

C

0

You are using selector in CSS, I guess you only select a component of the body. So if you want to whold background to be one color, you must select the right component. In HTML, there is head body, head tag define the content shown on the tag. Body define the whole body of your HTML. The highlight part is head and body of your HTML.

Cheiron answered 27/12, 2021 at 1:45 Comment(0)

A

0

just give the div a class and height of 100vh

.doc3 {
margin: auto 10px;
width: auto;
height: 100vh;
background-color: yellow;

}

Apiarist answered 12/5 at 14:25 Comment(0)

Recommended topics

Hot tags