Как расширить изображение в css, чтобы покрыть всю ширину страницы?

Question

У меня есть изображение, которое представляет собой только изображение перехода цвета (от синего до светло-голубого), но у него есть несколько графических блоков с левой стороны.

Я использую width: 100%, так что изображение будет растянуто с левой стороны страницы до правой части страницы, и это отлично работает.

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

CSS:

#header { 
    height:205px; 
    width:100%; 
    min-width:100%; 
    background-position:left top; 
    background-image:url(images/header.jpg); 
    background-repeat:no-repeat; 
    -webkit-background-size:cover; 
    -moz-background-size:cover; 
    -o-background-size:cover; 
    background-size:cover; 
} 

Я попытался width: auto и различные комбинации width и min-width: auto и 100%. Во всех случаях, когда я прокручиваю вправо, изображение всегда останавливается там, где первоначально было окно браузера. Если я растягиваю окно браузера достаточно широко, чтобы показать всю страницу, тогда изображение будет выглядеть так, как должно, прикрывая всю ширину. Когда я сокращаю окно браузера на половину ширины страницы, тогда изображение покрывает только половину страницы (часть, отображаемая в окне браузера). Затем, когда я прокручиваю вправо, изображение не растягивается, чтобы покрыть всю ширину страницы.

Как сделать снимок, чтобы покрыть полную 100% ширины страницы, даже если в окне браузера имеется горизонтальная полоса прокрутки (невозможно отобразить полную страницу без прокрутки вправо)?

Answer 1

Вы можете использовать единицы измерения css vw, которые относятся к значению ширины окна просмотра. поэтому 100vw = 100% ширина окна просмотра.

#header { 
    height:205px; 
    width: 100%; /* fall back */ 
    width: 100vw; 
    background-position:left top; 
    background-image:url(images/header.jpg); 
    background-repeat:no-repeat; 
    -webkit-background-size:cover; 
    -moz-background-size:cover; 
    -o-background-size:cover; 
    background-size:cover; 
}