Фоновое изображение в HTML

Question

Просьба указать, как установить фоновое изображение веб-страницы на весь экран.

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

Прямо сейчас у меня есть изображение с разрешением 1920: 1080 и это только хорошо выглядит на моем 19" монитор с разрешение 1440: 900, но не хорошо на 15,4 "ноутбуках и мобильных устройствах.

Помогите,

Спасибо.

Answer 1

Если background-size: cover; не работает для вас, например, если соотношение сторон изображения неправильно , то вы можете попробовать использовать background-size: auto 100%, чтобы изображение сохраняло его соотношение сторон, а также было достаточно высоким, чтобы соответствовать экрану.

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

Answer 2

Правильное решение для сохранения отношения к вашему изображению - установить background-size: cover.

Answer 3

Использование background-size:cover; поможет вам.

Answer 4

Использование background-size: cover; для новых браузеров:

<div id="bg"></div> 


html,body{ 
    height: 100%; 
} 
#bg{ 
    width: 100%; 
    height: 100%; 
    background: url(image-path.jpg) no-repeat; 
    background-size: cover; /* also include vendor prefixes: you may google */ 
} 

check compatibility using background-size

лучшее решение для полного фоновое изображение с отзывчивым можно найти here

Answer 5

Вы можете решить это двумя способами:

1. Новые браузеры, используйте CSS:

   background-size: cover 
   

2. старых браузеров, используют поддельные <img /> для фона.

   .bg {z-index: 1; position: absolute; width: 100%; height: 100%;} 
   

Answer 6

Фоновое изображение недвижимости для хромированных, mozile и оперных браузеров

body { 
    background: url(images/image.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}