Center an background image

StackOverflow https://stackoverflow.com/questions/1765784

  •  21-09-2019
  •  | 
  •  

Question

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>
Was it helpful?

Solution

Try adding this:

html,body { height:100%; }

OTHER TIPS

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.

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.

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;

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! :)

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top