Фоновая картинка для сайта

[MyNameIsJim]

Подскажите пожалуйста, есть такие нюансы.

 

1. Уменьшайте масштаб в браузере http://waa.ai/4cTS - почему внизу появляется белый фон, почему именно белый, откуда это? Как пофиксить или изменить цвет? Т.е. изначально сайт уменьшается нормально, затем внезапно снизу белое.

 

2. Уменьшайте масштаб тут http://waa.ai/4cTs - видите что фоновая картинка стала как бы в воздухе? Теперь посмотрите сайт из п1 и увидите, что она по краям тянется.

Теперь вопрос: можно ли сделать так, чтобы к краям прилипать фон начинал только с определенного разрешения, либо достигнув разрешения картинки и после не оставлять ее в вуздухе, а начинать тянуть.

Другими словами, пока окно небольшое - как на сайте номер 2. Как только размер экна увеличивается - картинка начинает масштабироваться.

Пояснение: картинку в воздухе не хочется. Но масштабирование создает проблему на низких разрешениях (1200 и меньше), т.к. получается, что картинка по горизонтали уменьшилась, а по вертикали так же уменьшилась и получилось, что вниз пол сайта эту картинку теряют. А будь она на низком разрешении окна в оригинале - охватила бы и по вертикали сайт. Но опять же масштабировать картинку на весь экран по типу http://waa.ai/4cTw - не подходит, т.к. получается, что фон всегда статичен и сайт двигается на фоне (фон не двигается с сайтом), тем самым создавая иллюзию сайта в воздухе (фон как космос).

 

3. Желтым выделена основная часть сайта, которую я хочу видеть активной http://goo.gl/MN193T

За желтой идет рваный фон. Который является частью дизайна. Проблема в том, что с фоном размер сайта уже 1200+ пикселей и появляется горизонтальная прокрутка. Хотя на том же нетбуке если убрать рваный фон - сайт влезает корректно без прокруток.

Вопрос: не удаляя рваный фон, можно ли указать браузеру, что рабочая область сайта только та, что желтая, тем самым не вызывая прокрутку, пока эта область видна, а рваный фон просто уходил бы за пределы окна.

[zenw]

1.

html, body {  height:100%;}body {  background: red; // ну или как хотите}

2.

@media (max-width: ширина_фоновой_картинки) {  ._wrapper {     background-size: auto;     background-position: center top;  }}