Почему фон страницы разъезжается?

Question

[Moe Green]

Доброго всем вечера!

Имеется статическая страница, у которой фон состоит из двух фоновых изображений. Такой фон я реализовал через multiple background:

background: fixed url(../img/left-bg.png) 0 0 no-repeat, fixed url(../img/right-bg.png) 100% 0 no-repeat;

Все отлично кроме случая с экранами большого разрешения - take.ms/3PESi.

Подскажите, как мне исправить эти уродливые "провалы"?

Answer 1

[Дмитрий]

Если контейнер сайта имеет фиксированную ширину, то можно нарисовать одну широкую картинку с прозрачным полем посередине, ширина этого поля = ширине контейнера сайта; а слева и справа ваши иллюстрации. И тогда можно использовать один background:url(...) center top repeat-y;

Comments

[Moe Green]

контейнер сайта имеет фиксированную ширину. интересный подход, но вот результат - тогда "провалы" появятся не между конейнером и картинками, а между картинками и границами viewport.

[Moe Green]

черт, не заметил repeat-y! очень интересно, надо попробовать!

[Moe Green]

средствами CSS такую картинку можно создать? у меня к рисованию руки из одного места растут (

[Дмитрий]

Valery Semenencko: так тут по сути и рисовать то не надо. просто создать canvas нужной ширины в фотошопе с прозрачным background; а потом слева и справа прижать к краям картинки... и всё. Сохранить в gif (если надо сохранить прозрачный фон посередине) или в jpeg (если общий фон сайта белый и размер общего файла будет приемлем). Можете выложить ваши картинки куда-нибудь, и указать ширину контейнера - склепаю вам картинку...

[Moe Green]

Дмитрий: единственным решением для себя нашел Ваше. Сделал цельный фон из картинок и поместил его background-position: 50% 0; с background-repeat: repeat-x; - take.ms/t4igS Только артефакты появляются при разрешении больше 1400px

[Дмитрий]

Valery Semenencko: ну мое то предложение было другим... С почему так стыкуется надо смотреть на живом примере.

[Moe Green]

Дмитрий: значит я Вас неправильно понял. Здесь находится точная копия фона страницы - https://www.dropbox.com/s/r690g3r3yr34z8s/two_back... Ширина конейнера фиксированная и равна 1000px.

Answer 2

[Виталий Яковенко]

Может попробовать задать размер фона в процентах через background-size?

Comments

[Moe Green]

пробовал так - background-size: 50% 0; и даже так - background-size: 50% 571px; Фоновые иллюстрации масштабируются, но результат получается очень уродливым. Картинка страшная получается.

[Виталий Яковенко]

Valery Semenencko: Попробуйте background-size: 50% auto;

[Moe Green]

ошибся - я как раз background-size: 50% auto; и пробовал первоначально

Answer 3

[Сергей]

Так используй media-queries. Начиная с той ширины окна браузера, на котором уже смотрится плохо - задай, что бы фоны вели сменяли позицию. Просто в файле стилей в конце заведи вот такую штуку:

@media only screen and (min-width:1920px) {
 background-position: позиция фона1, позиция фона2;
 ...любые другие стили...
}

Под 1920 имеется ввиду ширина окна. Поставь нужную и все.