Как сделать background-image на весь экран, при условии того, что будет видна вся картинка?
Пробовал разные свойства, но выходит так, что background-image все равно не растягивается должным образом. Нужно, чтобы задний фон покрывал всю страницу сайта, при этом картинка отображалась на 100%, background-image: cover не помогло
- Вопрос задан более трёх лет назад
- 26227 просмотров
Комментировать
Решения вопроса 1
Тыжпрограммист
background: url(image/bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;Ответ написан более трёх лет назад
Нравится 2 8 комментариев
и без префиксов достаточно
Ярослав Иванов @space2pacman Куратор тега CSS
Арман Дендибаев: В чем разница между -webkit- и -o- ?
Ярослав Иванов: Этот код не мой и старый я иногда юзаю этот метод
Ankhena @Ankhena Куратор тега CSS
Ярослав Иванов: webkit для webkit браузеров, -o- для старой оперы
Сергей delphinpro @delphinpro Куратор тега CSS
Этот код не мой и старый я иногда юзаю этот метод ну зачем бездумно копировать-то?
посмотрели бы актуальную поддержку браузерами caniuse.com/#search=background-size
Как видим префиксы уже пару лет неактуальны.
moneymakerXA @moneymakerXA Автор вопроса
Арман Дендибаев: Да, отлично, спасибо большое
Stanislav Yaroslavtsev @Stas_Yaroslavtsev
Не работает (
Ответы на вопрос 1
Знаю php, js, html, css
Вы скажите точнее, как нужно. У меня 3 варианта:
1. background-size: contain
Картинка показывается целиком, не искажаясь.
Пример
2. background-size: cover
Картинка заполняет все пространство, не искажаясь, но часть обрезается.
Пример
3. background-size: 100% 100%
Картинка заполняет все пространство, но искажается.
Пример
как можно сделать картинку в ноутбуке на весь экран, когда уменьшаешь разрешение?
если вы имеете в виду обои рабочего стола, то там(свойства рабочего стола — вкладка рабочий стол) есть выпадающий список. нужно выбрать растянуть.
Остальные ответы
очень просто — Свойства Рабочий стол — потом растянуть или Замостить, что больше по душе
Свойства —Рабочий стол —-Расположение : Растянуть
А где эти свойства?
Похожие вопросы
Ваш браузер устарел
Мы постоянно добавляем новый функционал в основной интерфейс проекта. К сожалению, старые браузеры не в состоянии качественно работать с современными программными продуктами. Для корректной работы используйте последние версии браузеров Chrome, Mozilla Firefox, Opera, Microsoft Edge или установите браузер Atom.
Как растянуть картинку на весь экран css?
Чтобы растянуть картинку на весь экран с помощью CSS, вы можете использовать следующий код:
img width: 100%; height: 100%; > Этот код устанавливает ширину и высоту картинки равными 100%, что означает, что она будет занимать всю доступную ширину и высоту родительского элемента.
Обратите внимание, что этот код работает только если родительский элемент имеет определенную ширину и высоту. Если это не так, то вы можете использовать следующий код:
html, body width: 100%; height: 100%; margin: 0; padding: 0; > img width: 100%; height: 100%; > Этот код устанавливает ширину и высоту html и body равными 100%, а также убирает верхний и левый отступы (margin), чтобы картинка занимала все доступное пространство.
В этом случае картинка будет растягиваться или уменьшаться в размерах, чтобы соответствовать размерам родительского элемента. Если же вы хотите, чтобы картинка оставалась пропорциональной, но занимала все доступное пространство, можно сделать так:
html, body width: 100%; height: 100%; margin: 0; padding: 0; > img width: 100%; height: auto; object-fit: cover; > Этот код устанавливает атрибут object-fit равным cover , что означает, что картинка будет обрезана, чтобы полностью заполнить доступное пространство, но при этом оставаться пропорциональной.
Нужно понимать, что этот код работает только в современных браузерах, поддерживающих атрибут object-fit . Если вы хотите, чтобы ваш код работал во всех браузерах, вы можете использовать JavaScript для реализации такого поведения.
10 октября 2022
Лучший способ растянуть изображение — это использовать свойство CSS3 background . Вот пример, который использует фоновое изображение для body страницы, рисунок всегда растянется и заполнит весь экран.
body /* задаёт путь до файла */ background-image: url("path_to_my_image.jpg"); /* задает стартовое положение изображения на странице */ background-position: center center; /* определяет размер изображения на странице */ background-size: cover; /* свойство устанавливает, будет ли повторяться изображение и каким образом */ background-repeat: no-repeat; /* cвойство определяет, будет ли фоновое изображение прокручиваться вместе с остальной частью страницы или будет фиксированным */ background-attachment: fixed; /* возможна также и короткая запись данных свойств */ // background: url("path_to_my_image.jpg") center center no-repeat fixed; // background-size: cover; > Как сделать картинку во весь экран html
Для того чтобы отобразить картинку на весь экран можно воспользоваться следующими примерами.
Вариант №1. Используем свойство background-image на блочном элементе, например на .
Исходный HTML документ
class="box">