How can I set the body color of a web page to the current width and height of the monitor?

Question

In the CSS for my web site, I have specfied the height as 800px, width as 1050px and the background-color to blue for the body tag.

The entire application (width and height) should be this size.

But if the current application is viewed on a monitor whose dimensions are larger (EG, 1440x900), we see white space towards the left and right sides of the page.

I need to specify the entire width and height of the application to the blue color, with no white space at either edge.

How can I accomplish this?

Answer 1

You want the background color of the site to be blue?

Body styles:

background-color: blue;
margin: 0;

Do not set a width and height on the body, this is unnecessary. The background color will render to the bounding of the window.

If you want to restrict your application from leaving the 800x1050 margins while retaining the background, just put a wrapper div around the site and set the width and height there:

<div style="width: 800px; height: 1050px; overflow: auto;">...</div>

The reason for the overflow auto is so the content will scroll when it's outside of those widths and heights, instead of breaking your boundaries.

Answer 2

in your css:

html
{
    background-color:blue;
}
body
{
    width:1050;
    height:800;
}