Html как сделать фон сайта: Как добавить фоновый рисунок на веб-страницу?

 <дел>
    

Порядок отображения источников (видео) соответствует порядку, в котором браузер пытается их воспроизвести. MP4 был для нас мучением, которое, как говорят другие учебники, нужно ставить первым, потому что устройства iOS проверяют только первый источник и могут воспроизводить только MP4. Но без дополнительной работы он не воспроизводился для нас на iOS по умолчанию (как и другие сайты, использующие видеофоны, поэтому мы проигнорировали его и просто заменили изображением плаката, а видео . webm поставили первым, потому что оно было более плавным на рабочем столе). браузеры

Мы помещаем его в div с классом баннера для проблем с iOS и исправляем, о чем мы поговорим ниже.

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

 #bgvid {
    положение: абсолютное; справа: 0; внизу: 0;
    минимальная ширина: 100%; минимальная высота: 100%;
    ширина: авто; высота: авто; z-индекс: 0;
    фон: прозрачный URL(poster_image.jpg) без повторов;
    фоновая позиция: по центру по центру;
    -webkit-background-size: обложка !важно;
    -moz-background-size: обложка !важно;
    -o-background-size: обложка !важно;
    background-size: обложка !важно;
}
 

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

Проблемы с видео и iOS

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

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

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

Ниже представлен CSS, который мы добавили. Медиа-часть важна, потому что она содержит размеры устройств iOS, но стиль внутри одинаков для каждого из них, установка изображения в качестве обложки и скрытие элемента видео (#bgvid)

 /* большинство мобильных устройств */
Экран @media и (max-device-width: 800px) {
    . баннер { фон: прозрачный URL (poster_image.jpg) центр без повторов; -webkit-background-size: обложка; -moz-background-size: обложка; -o-background-size: обложка; размер фона: обложка; }
    #bgvid { дисплей: нет; }
}
/* исправить фоновые изображения ios */
/* Ipad мини */
Только экран @media и (минимальная ширина устройства: 768 пикселей) и (максимальная ширина устройства: 1024 пикселей) и (-webkit-min-device-pixel-ratio: 1) {
    .баннер { фон: прозрачный URL (poster_image.jpg) центр без повторов; -webkit-background-size: обложка; -moz-background-size: обложка; -o-background-size: обложка; размер фона: обложка; }
    #bgvid { дисплей: нет; }
}
/* айпад в альбомной ориентации */
Только экран @media и (минимальная ширина устройства: 768 пикселей) и (максимальная ширина устройства: 1024 пикселей) и (ориентация: альбомная) {
    .баннер { фон: прозрачный URL (poster_image.jpg) центр без повторов; -webkit-background-size: обложка; -moz-background-size: обложка; -o-background-size: обложка; размер фона: обложка; }
    #bgvid { дисплей: нет; }
}
/* айпад портрет */
Только экран @media и (минимальная ширина устройства: 768 пикселей) и (максимальная ширина устройства: 1024 пикселей) и (ориентация: книжная) {
    . баннер { фон: прозрачный URL (poster_image.jpg) центр без повторов; -webkit-background-size: обложка; -moz-background-size: обложка; -o-background-size: обложка; размер фона: обложка; }
    #bgvid { дисплей: нет; }
}
/* айфоны */
Только экран @media и (минимальная ширина устройства: 320 пикселей) и (максимальная ширина устройства: 480 пикселей) {
    .баннер { фон: прозрачный URL (poster_image.jpg) центр без повторов; -webkit-background-size: обложка; -moz-background-size: обложка; -o-background-size: обложка; размер фона: обложка; }
    #bgvid { дисплей: нет; }
}
Только экран @media и (минимальная ширина устройства: 320 пикселей) и (максимальная ширина устройства: 568 пикселей) {
    .баннер { фон: прозрачный URL (poster_image.jpg) центр без повторов; -webkit-background-size: обложка; -moz-background-size: обложка; -o-background-size: обложка; размер фона: обложка; }
    #bgvid { дисплей: нет; }
}
 

Альтернативы

http://easyhtml5video.com/  — Сделал работу, но бесплатный добавил текст в качестве водяного знака, не очень хотел платить за обновление и добавил намного больше в код, который мы чувствовать раздутый это и не мог работать, если все это было необходимо.

http://dfcb.github.io/BigVideo.js . Вероятно, это было самое близкое к тому, что мы подошли к тому, что хотели. Но снова пришли с большим, чем мы действительно хотели. Но если мы хотим охватить больше устройств, действительно включить полноэкранный режим для адаптивного видео или предоставить эту опцию в нашей CMS, мы, вероятно, воспользуемся этим.

Заключение

Есть некоторые сайты, которые очень хорошо используют фоновое видео. fernando.is/all-about/ и paypal.co.uk – это только два из них. Благодаря более быстрому широкополосному доступу и высококачественной видеозаписи, доступной на большинстве устройств, похоже, что это может стать более распространенным явлением на веб-сайтах. Но высококачественное видео, как и изображения в настоящее время, является обязательным условием для того, чтобы этот метод работал хорошо.

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