• Страница 1 из 1
  • 1
Форум » Веб-разработка » Скрипты для сайтов » Растяжение фонового изображения на CSS (Растяжение полноэкранного фонового изображения CSS)
Растяжение фонового изображения на CSS
Kosten
Дата: Четверг, 2019-09-12, 19:35 | Сообщение 1
Оффлайн
Администраторы
Сообщений:25139
Награды: 57


Быстрый совет о том, как добавить полноэкранное фоновое изображение только с HTML и CSS, JavaScript не требуется. Этот метод отлично работает с адаптивными веб-сайтами и различными пропорциями.

Добавьте изображение в начало вашего HTML-документа после открывающего тега , назначив ему класс bg .

Код
<img src="filename.jpg" alt="bckgound" class="bg" />

Заполните файл CSS с помощью класса .bg. Мы можем добавить отзывчивую точку разрыва в 1024 пикселей.

Код
img.bg {
    min-height: 100%;
    min-width: 1024px;
    width: 100%;
    height: auto;
    position: fixed;
    top: 0;
    left: 0;
}

@media screen and (max-width: 1024px){
    img.bg {
    left: 50%;
    margin-left: -512px; }
}

Фоновое изображение займет весь экран, выдвигая содержимое ниже на странице. Обязательно настройте содержимое ниже, расположив его над фоновым изображением.
Страна: (RU)
Форум » Веб-разработка » Скрипты для сайтов » Растяжение фонового изображения на CSS (Растяжение полноэкранного фонового изображения CSS)
  • Страница 1 из 1
  • 1
Поиск: