Проблема, когда ширина монитора меньше ширины макета

Здравствуйте. Верстаю макет сайта. У самого монитор в ширину 1024px. Размер макета в ширину 1200px. Для таких мониторов, как у меня должна появляться горизонтальная полоса прокрутки. Она появляется. Но в от в чем проблема. Есть общий блок footer.

HTML:

header {
	background: url('../img/header_bg.jpg') no-repeat center top;
	min-height: 1241px;
	margin: auto;
	overflow: visible;
	width: auto;
	
}

который служит просто подкладкой и в котором есть фоновое изображение. Его ширина 1 920px. Оно отображается, приведу скрин:



Но когда прокручу вправо:



фоновое изображение тупо обрезается. Если менять масштаб, то обрезанная область появляется. overflow: visible; не помогает. В первый раз с таким сталкиваюсь, помогите пожаулйста решить.

 

background-size: cover;

 

1. BG резиновым, делай так:

HTML:

html {
	background: url('../img/header_bg.jpg') no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

2. Обязательно делжен быть вариант 1024px макета, это может быть сделано на базе адаптивной верстки например, но вертикальная прокрутка - это ппц.

 

пробовал, не помогло. Идея с адаптацией под 1024 тут наверно самая оптимальная. Спасибо.

 

min-width:1 920px не?

 

Значит не на html вешал, или чего-to не дописал. Вот посмотри рабочий пример в styles.css

 

https://github.com/srobbin/jquery-backstretch

 

Попробуй так


min-width: 1000px;
overflow: hidden;
position: fixed;
background-repeat: no-repeat;
background: url('../img/header_bg.jpg');
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;