Бг-имдж не растягивается полностью на body, что делать?
Бг-имдж не растягивается полностью на body, что делать?
Хотел задать общий фон для всего body, но в итоге получается белый прямоугольник снизу и body не растягивается на весь экран, помогите
Дополнительно:
Может напишешь какие стили у тебя на body? Не поверишь, но телепаты в отпуске. А вот скрины кроме первого можно удалить :)
min-height: 100%
background-size: cover
background-repeat: no-repeat
background-position: center
font-size: 16px
min-width: 320px
position: relative
line-height: 1.65
font-family: "Gt Eesti Pro Display"
overflow-x: hidden
opacity: 1
Ответы:
Попробуйте сделать так:
body { width: 100%; min-height: 100vh; background: url(path/to/img.jpg) center no-repeat; background-size: cover; } |
body { width: 100%; min-height: 100vh; background: url(path/to/img.jpg) center no-repeat; background-size: cover; }
Однако, есть нюанс такого, что на некоторых мобильных устройствах оно всё равно будет растягиваться не на весь экран (или не так, как ожидалось) и в этом случае нужно будет позицию блока указывать через position и left/right/top/bottom = 0.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы фоновое изображение (background-image) растянулось на всю ширину body, необходимо использовать CSS свойство background-size со значением cover. Это позволит изображению заполнить всю доступную область body, сохраняя при этом пропорции.
Пример кода на CSS:
body { background-image: url('путь_к_изображению.jpg'); background-size: cover; }
Также, убедитесь, что у body и html заданы следующие стили:
html, body { height: 100%; margin: 0; padding: 0; }
Эти стили позволят фоновому изображению занимать все доступное пространство body. Помните, что некоторые браузеры могут иметь некоторые особенности в отображении фоновых изображений, поэтому рекомендуется проверить работу вашего решения в различных браузерах.