Проблемы с картинкой в background-е

Общее
1

Я никак не могу разобраться со свойствами бэкграунда: вроде, перечитал всё, и всё равно каждый раз проблемы. Ситуация такая: есть кусочек кода:
`

`

Я хочу поставить на body фоновую картинку.
body {
background: url(“http://mirgif.com/priroda/priroda-3.jpg”) no-repeat center;
background-size: cover;
}

Однако, при таком картинка утягивается вверх (никаких полос прокрутки не появляется) и между нижним её краем и вьюпортом появляется белая полоса:

Безымянный.png1366×768 1.37 MB

Проблему решает только дописывание fixed после …center. Я не хочу тупо зазубривать записи правил, я хочу разобраться: почему так происходит. И почему помогает fixed - я знаю, что это свойство не даёт фону прокручиваться вместе с другими блоками (если бы они были), но чтобы оно ещё двигало картинку и заполняло полностью ею фон - такого не слышал. Спасибо!

2

Интересное наблюдение. Я такого тоже не знала. Получается, что картинка сверху обрезается. Возможно, из-за background-position: center center; (второе значение не указано, а значит воспринимается как такое же)
Попробуйте заменить на center top.

3

Попробовал: да, закрывает, но при этом сильно увеличивает картинку, так что во вьюпорте видна только её самая верхняя часть. При замене top на px возникает белая полоса сверху. Если постепенно уменьшать числовое значение, то картинка двигается вверх, но как только ставишь 0, появляется белая полоса снизу опять (( Не понимаю, почему это дело так себя ведёт…

4

Попробуйте
background-size: 100% 100%;
или можно попробовать заменить cover на contain

5

Масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока.

cover

6

Или попробуйте задать body {height: 100vh; background-size: 100% 100%;}body получит высоту экрана а background-size: 100% ширина и 100% высота от body

7

Отчитываюсь:slight_smile: при замене cover на contain - картинка превращается в едва различимый квадратик, прижатый к самой верхней границе браузера по центру. Вариант со “100% 100%” растягивает этот квадратик по ширине в узчайшую полосу. Последний вариант начал работать, по крайней мере, картинка тянется книзу и полоса шире, т.е. если задать height ещё больше, то можно приблизиться к низу вьюпорта, тем самым, растянуть её на весь body… Но всегда ли возможно в проектах заранее знать, сколько будет body?

8 
<!DOCTYPE html>
<html>
<head>
<title>HTML5, CSS3 and JavaScript demo</title>
<style>
    body{
	    padding:0;
	    margin:0;
    }
    .first-page{
	    height: 100vh;
	    width: 100vw;
	    background:url("http://mirgif.com/priroda/priroda-3.jpg");
	    background-repeat: no-repeat;
	    background-size: 100% 100%;
    }
</style>
</head>
<body>

  <div class="first-page">

  </div>

<!-- End your code here -->
</body>
</html>
9 
    <!DOCTYPE html>
<html>
<head>
<title>HTML5, CSS3 and JavaScript demo</title>
<style>
    body{
	    //padding:0;
	    //margin:0;
	    background:url("http://mirgif.com/priroda/priroda-3.jpg");
	    background-repeat: no-repeat;
	    background-size: 100% 100vh;
    }

</style>
</head>
<body>
<!-- Start your code here -->


<!-- End your code here -->
</body>
</html>

Такой вариант решения мне нравится больше всего!

1 лайк
10

Ок. Спасибо огромное, что поделились своими мыслями:slight_smile: Т.е. без задания высоты боди никак не обойтись…

11

Алексей обратите внимание на последний вариант лично мне нравится больше всего
body высота не задается а указывается фоновое изображение , фоновом изображению задаем ширину 100% и высоту 100vh(100% от высоты области просмотра)

12

Хорошо обращу именно на него:slight_smile: Скажите, а что за единицы - vh? Или это опечатка, которая подразумевает px?

13

https://webref.ru/layout/advanced-html-css/responsive-web-design
Можно прочитать здесь.И вообще очень полезный сайт рекомендую.

14

Ну, Вы просто волшебник!! Это именно та тема, которая меня затормозила в вёрстке учебных макетов ) И я никак не мог найти достойный источник. А тут - как будто Вы мои мысли прочитали! Спасибо Вам огромное, вот просто ОГРОМНОЕ спасибо! :slight_smile: