Фоновое изображение в div обрезается сверху и снизу, когда страница слишком короткая

#html #css #background #scale

#HTML #css — код #фон #масштаб

Вопрос:

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

chaptertwollc.com

А вот соответствующий CSS.

 .centerLogo {
    height: 50%;
    width: 50%;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    text-align: center;
    margin-top: auto;
    margin-right: auto;
    margin-bottom: auto;
    margin-left: auto;
    visibility: visible;
    background-repeat: no-repeat;
    background-image: url(../POP high res logo ellipse black glow webop.png);
    background-size: 100%;
    background-position: center center;
    background-attachment: scroll;
}

РЕДАКТИРОВАТЬ: у меня это получилось. Это было так же просто, как измениться

 background-size: 100%;

Для

 background-size: contain;

Ответ №1:

Кросс-браузерное решение заключается в том, что Svoka использовала неправильное значение CSS…

 -webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;

Contain сообщает механизму рендеринга, чтобы убедиться, что фон помещается в контейнер без изменения соотношения сторон.

Ответ №2:

Если я вас правильно понял, просто попробуйте использовать

 -webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;