Как использовать фон 1200px при предотвращении горизонтальных полос прокрутки, если ширина браузера не равна 1200px?

Question

Для моего заголовка у меня есть повторяющийся элемент, который будет расширять любую ширину браузера - 2000 пикселей, 4000 пикселей и т. Д. Внутри элемента заголовка у меня есть фиксированный фон шириной 1200 пикселей. Размер моей страницы составляет 960 пикселей.

Если я установил фиксированное значение 1200 пикселей, горизонтальные полосы прокрутки появятся для пользователей с шириной браузера ниже 1200 пикселей.

Как я могу сделать так, чтобы люди с окном браузера 1100px не увидели горизонтальные полосы прокрутки?

header { 
    background: #000 url("/images/bg-header-repeat.png") repeat; 
    position: relative; 
} 

.header-wrapper { 
    background: url("/images/bg-header.png") no-repeat left top; 
    margin: 0 auto; 
    min-height: 100px; 
    width: 1200px; 
} 

.container { 
    margin: 0 auto; 
    width: 960px; 
} 

Answer 1

не дают статическую (и большой) ширины к контейнеру.

сделать это:

.header-wrapper { 
    background: url("/images/bg-header.png") no-repeat left top; 
    min-height: 100px; 
    width:100%; 
    position:relative; 
    left:0; 
    top:0; 
} 

.container 
{ 
    position:relative; 
    width:80%; 
} 

дает большую статическую ширину склонно привести горизонтальную полосу прокрутки в разрешающей способности. Если вы хотите охватить всю ширину браузера в широком диапазоне разрешения, укажите ширину в процентах. Также изготовление вашего контейнера position:relative делает его top, left, right и bottom активными. поэтому вам не нужно будет использовать margin. Эти свойства выбирают их значение относительно родительского контейнера.

Answer 2

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

.header-wrapper { 
    background: url("/images/bg-header.png") no-repeat left top; 
    margin: 0 auto; 
    min-height: 100px; 
    max-width: 1200px; 
}