Hi,

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"
   "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title></title>
    <!-- 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>
</head>
<body class="bgimg">
<div id="doc2">
    <div id="hd"></div>
    <div id="bd">
        <div id="cont">
            <div class="middle">
                <p> hi hello </p>
            </div>
        </div>
    </div>
    <div id="fd"></div>
</div>  

3 answers

Rob 230
2
points

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 about 8 years ago by Rob
0
points

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 about 8 years ago by Dwayne Anderson
  • Thanks buddy, but I'm still getting the white space at the bottom. Karthik about 8 years ago
  • Please have a look at the screen shot http://img684.imageshack.us/img684/5449/picture1w.png Karthik about 8 years ago
  • This CSS works exactly the same as the original. The recommendation about the body element is spot on, though. Doug about 8 years ago
Doug 1095
0
points

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 about 8 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 about 8 years ago
  • Have you tried applying the background to the html element instead of body? Doug about 8 years ago