Изображение CSS не покрывает экран

Question

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

Вот мой CSS:

  .header { 
      background-image:url('images/header.png'); 
      height: 120px; 
      width: 100%; 
      position: absolute; 
      left: 0; 
      z-index:1;   
     } 

Моя ошибка в том, что, если изменить размер окна браузера, так что она имеет полосу прокрутки, и я прокрутки вправо мое изображение останавливается рисунок после определенного момента. Кажется, что изображение рисует 100% ширину окна, но оно не применяется, если какое-то окно не видно и только с помощью полосы прокрутки.

Как исправить это? Вот картина моей проблемы:

края экрана перед прокруткой вправо:

края экрана после прокрутки:

Answer 1

Использование background-size:cover; и background-repeat:no-repeat;

.header { 
     background-image:url('images/header.png'); 
     background-size:cover; 
     background-repeat:no-repeat; 
     height: 120px; 
     width: 100%; 
     position: absolute; 
     left: 0; 
     z-index:1;   
    } 

В настоящее время вы не говорите фоновому изображению, чтобы «растянуть», чтобы он оставался фиксированным в его первоначальных размерах.

У вас также есть ДРУГОЕ проблема - ваше свойство html css не установлено в ширину: 100%; ваш bootstrap.css переопределяет его. Таким образом, ваш элемент заголовка растягивается до 100% элемента html, который не является 100% ширины экрана.

Найдите свой CSS и добавить (или изменить) текущие HTML & правила тела:

html,body { 
    width:100%; 
    margin:0; 
    padding:0; 
} 

Убедитесь, что он загружен ПОСЛЕ бутстраповского CSS (и, следовательно, имеет приоритет bootstrap.css).

Если он по-прежнему создает проблемы, попробуйте использовать

width:100% !important;

Просто для общего знания, я рекомендую использовать ваши браузеры встроенный инспектор инструмент (или FireBug), чтобы увидеть элемент на экране и то, что их динамические значения css.

Надеюсь, это поможет!