HTML background overlapping body background

Question

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

Это работает отлично, за исключением случаев, когда кто-то делает масштаб браузера. Как ни странно, фон HTML начинает ползать по фону тела с правой стороны.

html { 
margin: 0; padding: 0; border: 0; 
background: #000000 url("menu/images/redline2.jpg") repeat-y center; 
} 

body { 
margin: 0; padding: 0; border: 0; 
background: url("menu/images/about_bg2.jpg") no-repeat center; 
} 

Ссылка на примере выпуска: http://www.bitchofrome.com/about/about3.html

Answer 1

Это общая проблема, и есть простое решение для этого. Это часто случается, когда у вас есть контейнер шириной 100% с фоновым цветом или изображением. Если вы ограничиваете окно браузера (или увеличиваете), а затем прокручиваете вправо, фон исчезает (поскольку он не перерисовывается). Фиксирование заключается в установке минимальной ширины на внешнем контейнере, равной (или большей) ширине внутренних элементов.

В этом случае, что нужно это:

html {min-width: 1100px;}