Center an background image

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

  •  21-09-2019
  •  | 
  •  

문제

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>
도움이 되었습니까?

해결책

Try adding this:

html,body { height:100%; }

다른 팁

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

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top