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

07.05.2019 15:26

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

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

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

design-development-electronics-326424.jpg

Способ 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 src="/images/background.jpg" class="background" />
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

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

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

<div class="background">
  <img src="/images/background.jpg" />
</div>
div.background {
  position: fixed; 
  top: -50%; 
  left: -50%; 
  width: 200%; 
  height: 200%;
}

img {
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  margin: auto; 
  min-width: 50%;
  min-height: 50%;
}

Демо

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

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

Комментарии

  • Лёня Радин

    Лёня Радин

    22.06.2023 14:34

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

    • Алекандр

      Алекандр

      05.03.2024 18:45

      В коде текст должен быть под кодом фона код работает так что если ты сначала напишешь текст а потом фон то фон все что было выше в коде покроет тебе нужно фон в самом начале прописывать в body

  • Влад

    Влад

    11.04.2023 22:44

    Не чего не сработает если добавлять через background-image

  • Валентина

    Валентина

    03.04.2023 22:58

    Доброго вечора. Не получається зробити 3 способом, мені треба в одній із секцій встановити фон, я це роблюпісля чого всі інші секції обрізаються

  • Викторий

    Викторий

    seozp.ru

    14.12.2020 13:41

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

  • Марина

    Марина

    19.11.2020 14:17

    Помогите пожалуйста, я не могу вставить ни фон рисунок, ни картинки на нем. Я все испробовала

    • Евгений

      Евгений

      30.03.2021 23:26

      Надо указать правильно путь и размеры картинки)

  • 18.11.2020 10:24

    Можете помочь если вас не затруднит?

    Либо я дурак, либо не могу понять как вставить этот проклятый фон, просто не вставляется нормально и вся!(

    • Вадим

      Вадим

      Администратор

      18.11.2020 16:44

      Конечно, помогу. Расскажите поподробнее, в чем проблема

      • 18.11.2020 23:41

        Не могу вставить картинку в фон, как не пробовал, никак не получается не получается поменять цвет одного блока, хотя раньше получалось, похоже что где-то накосячил, но найти не могу где...

  • Дмитрий

    Дмитрий

    19.05.2020 00:45

    Я вас обожаю

  • Мурат

    Мурат

    21.10.2019 13:13

    помогите оформить страницу

    • Вадим

      Вадим

      Администратор

      22.10.2019 15:04

      Что за страница, адрес? Какая нужна помощь?

Оставьте свой комментарий

© 2024 SITEROST

Ничего не найдено