Please have a look at the attached screenshot, I have set an image as a background and background color as black, but the background color is not fully covered the viewportm there is a white space. Please could anyone help me to fix this.

.bgimg {
    background: url('../images/GBS-Chronicle-Background-1.png') black no-repeat center;
div#cont {
    height: 672px;

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"

<html lang="en">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!-- Combo-handled YUI CSS files: -->
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?2.8.0r4/build/reset-fonts-grids/reset-fonts-grids.css">
    <link rel="stylesheet" href="../css/news.css" type="text/css" media="screen" title="no title" charset="utf-8">
    <script src="../js/iepngfix_tilebg.js" type="text/javascript" charset="utf-8"></script>
<body class="bgimg">
<div id="doc2">
    <div id="hd"></div>
    <div id="bd">
        <div id="cont">
            <div class="middle">
                <p> hi hello </p>
    <div id="fd"></div>

3 answers

Rob 230

The problem is coming from the Yahoo stylesheet you are linking to which is setting the background for the html tag. If you remove that css property for html, the problem goes away.

Answered almost 10 years ago by Rob

Try this instead...

.bgimg {
    background: #000 url('../images/GBS-Chronicle-Background-1.png') 50% 0 no-repeat;

You could also just apply this rule to the <body> element, and do away with the class name...

Answered almost 10 years ago by Dwayne Anderson
  • Thanks buddy, but I'm still getting the white space at the bottom. Karthik almost 10 years ago
  • Please have a look at the screen shot http://img684.imageshack.us/img684/5449/picture1w.png Karthik almost 10 years ago
  • This CSS works exactly the same as the original. The recommendation about the body element is spot on, though. Doug almost 10 years ago
Doug 1095

A few questions:

  • Does this occur in other browsers as well? If not, which ones?

  • Does the body element have a bottom margin applied to it in any of the CSS we can't see? If so, remove it.

  • Are you serving the page with an XML MIME type (application/xhtml+xml)? If so, the body element is only as big as its contents in XML. Solutions: Change the MIME type to HTML (text/html) or apply the background to the html element instead of body.

Answered almost 10 years ago by Doug
  • Yes, it occur in all the browsers. No No I just want the image in the center of the webpage with a black background. Please could you help me. Karthik almost 10 years ago
  • Have you tried applying the background to the html element instead of body? Doug almost 10 years ago