Центр фонового изображения

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

  •  21-09-2019
  •  | 
  •  

Вопрос

enter image description here

Пожалуйста, посмотрите на приведенный выше снимок экрана, я хотел бы сосредоточить изображение с черным фоном, но я получаю немного места внизу. Пожалуйста, может помочь мне это исправить.

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>
Это было полезно?

Решение

Попробуйте добавить это:

html,body { height:100%; }

Другие советы

Попробуйте настроить height:100%; на вашей .bgimg учебный класс.

Редактировать: Вы также можете установить padding:0;margin:0; на ваш .bgimg Класс тоже просто чтобы убедиться.

Я думаю, что GBS-Cronicle-Background-1.png недостаточно высок. Вы можете добавить цвет фона в черный цвет или повторить изображение вместе с Y.

Попробуйте изменить порядок вашего правила фонового правила, чтобы цвет был первым.

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

Попробуйте это тоже (как было предложено выше):

Body {color:#000000;}

Также: я бы также предложил прокомментировать высоту вашего контента Div. И/или установление BKG-цвета контента Div до того же цвета, что и тело. Надеюсь, это поможет! :)

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top