Изображение нижнего колонтитула повторяется или создает пробелы при масштабировании окон браузера - PullRequest
Новая
       9

Изображение нижнего колонтитула повторяется или создает пробелы при масштабировании окон браузера

1 голос
/ 17 октября 2019

У меня есть веб-страница с нефиксированным нижним колонтитулом, т. Е. Если вы прокрутите страницу вниз, нижний колонтитул будет там. Он имеет фоновое изображение, которое нужно масштабировать до размера браузера и работать на IE11. Когда браузер развернут, нижний колонтитул отображается правильно, но когда я изменяю его размер на меньший, нижний колонтитул повторяется. Итак, я установил: 

background-repeat: no-repeat;

Однако это вызывает точно такую ​​же проблему, за исключением того, что повторяющаяся часть заменяется пробелом.

Как сделать так, чтобы он не повторялся и не отображал лишние пробелы, когда изображение нижнего колонтитула вынуждено масштабировать из браузера при изменении размера? 

.footer {
    position: absolute;
    width: 100%;
    background-image: url("../image.png");
    height: 190px;
    background-size: 100%; 
    background-repeat: no-repeat;
}

<div class="footer">
        FOOTER
</div>

1 Ответ

0 голосов
/ 17 октября 2019

Вместо того, чтобы устанавливать размер фона на 100%, установите его для содержания или покрытия: 

.footer {
    position: absolute;
    width: 100%;
    background-image: url("../image.png");
    height: 190px;
    background-size: contain; /* 100% is cover */
    background-repeat: no-repeat;
}

См. Также: Изменение размера фоновых изображений с размером фона и фон-размер-недвижимость

...