• Страница 1 из 1
  • 1
Форум » Веб-разработка » Структура HTML элемента » Стильное фоновое покрытие или обложки на CSS (Как нужно правильно установить положение фиксированного фона)
Стильное фоновое покрытие или обложки на CSS
Kosten
Дата: Среда, 2020-03-18, 19:31 | Сообщение 1
Онлайн
Администраторы
Сообщений:27454
Награды: 61


Чтобы раздел сайта имел div с фоновым изображением, которое имело и то, background-attachment: fixedи другое background-size: cover, независимо от размера изображения. Этот веб-сайт является рабочим примером нескольких фиксированных полноэкранных разделов фонового изображения.

Код
div {
  width: 100%;
  height: 90vh;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
}

Вы также можете написать этот код в backgroundстенографии:

Код
div {
  background: url(file.jpg) no-repeat 50% fixed / cover;
}

Теперь переходим к основе:

Установка:

HTML

Код
<div style="background-image: url(https://placeimg.com/1000/600/arch);"></div>

<div style="background-image: url(https://placeimg.com/1000/600/nature);"></div>

<div style="background-image: url(https://placeimg.com/1000/600/tech);"></div>

CSS

Код
div {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
    height: 90vh;
}

Фоновое изображение в HTML только в том случае, если вы извлекаете изображение динамически через PHP. В противном случае вы можете создать отдельные классы с фоновыми изображениями в файле CSS.

Демонстрация
Прикрепления: background-cove.zip(2.4 Kb)
Страна: (RU)
Форум » Веб-разработка » Структура HTML элемента » Стильное фоновое покрытие или обложки на CSS (Как нужно правильно установить положение фиксированного фона)
  • Страница 1 из 1
  • 1
Поиск: