Как поставить картинку на задний фон

Как поставить картинку в качестве заднего фона для body?

Как мне поместить картинку на задний фон страницы, чтобы она заполнила экран полностью? Этот код не помог:

body

Отслеживать
задан 3 мая 2020 в 14:46
177 1 1 серебряный знак 13 13 бронзовых знаков
Можно просто надо убрать внешние отступы у body с помощью margin: 0 ?
3 мая 2020 в 14:50
background-image
3 мая 2020 в 14:59

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

*, *:before, *:after < -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; >body < background: url(https://picsum.photos/1000/800) no-repeat center; -webkit-background-size: cover; background-size: cover; min-height: 100vh; >h1

Контент на странице

Отслеживать
ответ дан 3 мая 2020 в 15:46
Михаил Камахин Михаил Камахин
8,695 2 2 золотых знака 16 16 серебряных знаков 56 56 бронзовых знаков

У каждого браузера есть свои дефолтные стили для тех или иных элементов. Потому у вас по краям есть отступы

body

Если вы не хоте что бы картинка повторялась по оси Y или оси Х, тогда нужно добавить ещё background-repeat: no-repeat;

body < width: 100vw; height: 100vh; margin: 0; padding: 0; background: url(https://ak5.picdn.net/shutterstock/videos/16547275/thumb/1.jpg) no-repeat; background-size: cover; position: relative; >h1

ищ 
EXEMPLE
 

Отслеживать
ответ дан 3 мая 2020 в 15:48
2,152 11 11 серебряных знаков 28 28 бронзовых знаков

• html
• css
• css3
• html5
• веб-программирование

Важное на Мете

Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.1.3.2953

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Как сделать картинку фоном в HTML и CSS. 3 простых способа

Приветствую. В этой статье я хочу рассказать о трех способах размещения изображения в качестве фона всей страницы при помощи только HTML + CSS (без использования JS).

Итак, требования к фоновому изображению у нас следующие:

• Покрывается 100% ширины и высоты страницы
• Фон масштабируется при необходимости (background растягивается или сжимается в зависимости от размеров экрана)
• Сохраняются пропорции картинки (aspect ratio)
• Изображение центрировано на странице
• Фон не вызывает скроллов
• Решение максимально кроссбраузерное
• Не используются никакие другие технологии кроме CSS

Способ 1

На мой взгляд, это лучший способ, ведь он самый простой, лаконичный и современный. Он использует свойство CSS3 background-size , которое мы применяем к тегу html . Именно html , а не body , т.к. его высота больше или равна высоте окна браузера.

Устанавливаем фиксированный и центрированный фон, затем корректируем его размер, используя background-size: cover .

html < background-image: url(images/background.jpg); background-repeat: no-repeat; background-position: center center; background-attachment: fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; >

Этот способ работает в

Chrome (любая версия) Opera 10+ Firefox 3.6+ Safari 3+ IE 9+

Для того чтобы изображения загружались быстро, размещайте свои сайты только у проверенных хостинг-провайдеров, например, Beget.com Пользователи и поисковые системы любят быстрые сайты.

Способ 2

Этот способ предусматривает использование элемента img, размер которого будет изменяться в зависимости от размера окна браузера. Чтобы растянуть изображение на весь экран, ему необходимо задать min-height и width со значением 100%. А чтобы изображение не сжималось до размера меньшего, чем оригинальный, установим min-width со значением равным ширине картинки.

В случае если ширина окна будет меньше ширины изображения, будет использоваться media query для выравнивания бэкграунда по центру.

img.background < min-height: 100%; min-width: 640px; width: 100%; height: auto; position: fixed; top: 0; left: 0; /* Зависит от размера изображения */ @media screen and (max-width: 640px)< img.bg < left: 50%; margin-left: -320px; >> >

Этот способ работает в:

• Любой версии хороших браузеров (Chrome, Opera, Firefox, Safari)
• IE 9+

Способ 3

Еще один способ заключается в следующем: фиксируем изображение к левому верхнему углу страницы и растягиваем его при помощи свойств min-width и min-height 100%, сохраняя при этом соотношение сторон.

Правда при таком подходе картинка не центрируется. Но эта проблема решается заворачиванием картинки в , который мы делаем в 2 раза больше размера окна. А само изображение мы растягиваем и помещаем по центру.

div.background < position: fixed; top: -50%; left: -50%; width: 200%; height: 200%; >img

Этот способ работает в хороших браузерах и IE 8+.

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

Как сделать картинку фоном в html

Чтобы установить картинку в качестве фона в HTML, можно использовать свойство background-image в CSS.

Например, чтобы установить картинку «background.jpg» в качестве фона для элемента body , можно использовать следующий код:

 body  background-image: url('background.jpg'); background-repeat: no-repeat; background-size: cover; >  

В этом примере свойство background-image задает путь к файлу изображения. Свойство background-repeat устанавливает, как изображение будет повторяться. Тут мы устанавливаем значение no-repeat , чтобы изображение не повторялось. Свойство background-size устанавливает размер изображения. В данном примере мы устанавливаем значение cover , чтобы изображение занимало всю доступную область и сохраняло свои пропорции.

Добавление фонового рисунка

Вы можете добавить разные фоновые рисунки ко всем слайдам или же использовать один и тот же рисунок в качестве фона всей презентации.

Добавление фонового рисунка

1. Выберите слайд, на который вы хотите добавить фоновый рисунок.
2. На вкладке Конструктор нажмите кнопку Формат фона.
3. В области Формат фона выберите пункт Рисунок или текстура.
4. Откройте вкладку Файл.
5. В диалоговом окне Вставка рисунка щелкните нужное изображение и нажмите кнопку Вставить.

Примечание: PowerPoint изменяет размер изображения, чтобы заполнить весь фон слайда. Если общая форма изображения не совпадает с формой слайда, на который оно помещается, внешние части рисунка могут выйти за границы слайда и не будут видны.

• С помощью ползунка Прозрачность сделайте рисунок более светлым.
• Для настройки положения рисунка можно использовать параметры смещения.
• Чтобы повторить рисунок на слайде, щелкните Преобразовать рисунок в текстуру.

Удаление фонового рисунка

1. Выберите слайд, с которого вы хотите удалить фоновый рисунок.
2. На вкладке Конструктор нажмите кнопку Формат фона.
3. Щелкните Сплошная заливка.
4. Щелкните стрелку рядом с кнопкой Цвет.
5. Выберите белый цвет.
6. Если вы хотите удалить фоновый рисунок со всех слайдов, нажмите кнопку Применить ко всем.