• Страница 1 из 1
  • 1
Форум » Записки веб-разработчика » Начинающему вебмастеру » Создать адаптивное фоновое изображение в CSS (Создание адаптивного фонового изображения на стилях CSS)
Создать адаптивное фоновое изображение в CSS
Kosten
Дата: Среда, 2018-09-19, 03:25 | Сообщение 1
Администраторы
Сообщений:18833
Награды: 55


Рассмотрим, как можно создать адаптивное изображение, которое будет установлено как фон на сайте. Так как оно намного красивее смотрится на мобильных аппаратах. Но и безусловно, чтоб корректно отображалась на самых популярных браузерах. Здесь можно распределить на несколько категорий, но возьмем основные, это для интернет портала, но и для тематических страниц. Которые делаем специально для одной тематики.

Это может быть как услуга или продажа, что безусловно по стилистике должно смотреться просто великолепно, что сейчас подробно узнаем как все можно это создать, а главное правильно сделать. Для начало давайте посмотрим как смотрится адаптивный фон изображение.



Приступаем к созданию адаптивного фонового изображения:

Здесь изначально будем задавать фоновое изображение для body, где аналогичным образом можете сделать под любой блок на странице.

HTML

Код
<!Doctype html>
<html>
    <head>
        <title>ZorNet - портал для вебмастера</title>
    </head>
    <body>
       Здесь буден написанный контент.
    </body>
</html>


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

CSS

Код
body {
    /* Путь к изображению относительно данного файла */
    background-image: url(../images/background-photo.jpg);

    /* Центрирование изображения по вертикали и горизонтали всегда */
    background-position: center center;

    /* Запрещаем повтор изображения */
    background-repeat: no-repeat;

    /* Фиксируем изображение - оно остается на месте при прокрутке окна */
    background-attachment: fixed;

    /* Изображение будет масштабироваться в зависимости от размеров контейнера */
    background-size: cover;

    /* Цвет фона изображения, который будет показываться пока изображение не загрузится */
    background-color:#464646;

    /* Эквивалентная сокращенная запись
    * background: url(background-photo.jpg) center center cover no-repeat fixed;
    */
}

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

/* Для мобильных устройств */
@media only screen and (max-width: 767px) {
    body {
        /* Если размер экрана меньше 767px показываем уменьшенное изображение,
        * которое на 77% меньше чем оригинальное для обеспечения быстрой загрузки
        * на мобильных устройствах */
        background-image: url(../images/background-photo-mobile-devices.jpg);
    }
}


Этот метод считается одним из актуальных по использованию для применение на каждую страницу.

Важно: Также будет представлен архив, что закреплен за материалом.

Демонстрация
Прикрепления: 3048807.jpg(44.7 Kb) · fon.rar(168.5 Kb)
Страна: (RU)
Форум » Записки веб-разработчика » Начинающему вебмастеру » Создать адаптивное фоновое изображение в CSS (Создание адаптивного фонового изображения на стилях CSS)
  • Страница 1 из 1
  • 1
Поиск: