CODEWITHSUNDEEP
htmlcssbackground-image
Karthik
Karthik

Reputation: 2581

Center an background image

enter image description here

Please have a look at the above screen shot, I would want to center an image with black background, but i'm getting some white space at the bottom. Please could any one help me to fix this.

CSS

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

HTML 

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

Upvotes: 0

Views: 757

Answers (5)

T-bone
T-bone

Reputation:

try this too (as has been suggested above):

body {color:#000000;}

Also: I would suggest commenting out the Height of your content div as well. And/or setting the bkg-color of the content div to the same color as the body. Hope that helps! :)

Upvotes: 0

Bertine
Bertine

Reputation: 630

Try adding this:

html,body { height:100%; }

Upvotes: 1

keithjgrant
keithjgrant

Reputation: 12769

Try changing the order of your background rule so the color comes first.

background: black url('../images/GBS-Chronicle-Background-1.png') no-repeat center;

Upvotes: 0

Henry Gao
Henry Gao

Reputation: 4936

I guess GBS-Chronicle-Background-1.png is not high enough. you can either add background color to black or repeat the image along with Y.

Upvotes: 0

jaywon
jaywon

Reputation: 8234

Try setting height:100%; on your .bgimg class.

Edit: You may also want to set padding:0;margin:0; to your .bgimg class as well just to make sure.

Upvotes: 0

Related Questions