Фон под размеры экрана

Тема в разделе "Верстка", создана пользователем artefakt777, 12 сен 2013.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Модераторы: ultra
  1. artefakt777

    artefakt777

    Регистр.:
    15 июл 2012
    Сообщения:
    474
    Симпатии:
    119
    Имеем такой css фона:
    Код:
    body {
        background: #fff url('../images/bg2.jpg');
        background-position: center;
        background-repeat: no-repeat;
        }
    Картинка имеет размер 1400px на 800px

    Если разрешение монитора будет большее 800 px в высоту, то будет виден белый экран. Фон к сожалению не бесшовный.

    Как можно выйти из данной ситуации?
     
    avtorit1949 и Шумадан нравится это.
  2. mdss

    mdss ♖♘♗♕♔♗♘♖

    Moderator
    Регистр.:
    20 фев 2007
    Сообщения:
    1.134
    Симпатии:
    668
  3. Шумадан

    Шумадан Хабарра!!11

    Регистр.:
    6 фев 2008
    Сообщения:
    1.728
    Симпатии:
    2.105
    а так пробовали?
    Код:
    html {
      background: url(images/bg.jpg) no-repeat center center fixed;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
    }
     
    artefakt777 нравится это.
  4. Maybe

    Maybe

    Moderator
    Регистр.:
    7 июл 2008
    Сообщения:
    1.158
    Симпатии:
    1.198
    Это первое решение по ссылке mdss.. )
     
    Шумадан нравится это.
  5. artefakt777

    artefakt777

    Регистр.:
    15 июл 2012
    Сообщения:
    474
    Симпатии:
    119
    Отлично работает, но такой нюанс:
    Можно ли растянуть изображение по высоте, т.е. нужно, что бы синий фон был на экране, а при прокрутке появлялась панорама.
    bg2.jpg
     
  6. sofwar

    sofwar Создатель

    Регистр.:
    15 июл 2012
    Сообщения:
    10
    Симпатии:
    2
    Предложу свой вариант
    HTML:
    body {
        background: url(images/sun2.png) no-repeat;
        -moz-background-size: 100%; /* Firefox 3.6+ */
        -webkit-background-size: 100%; /* Safari 3.1+ и Chrome 4.0+ */
        -o-background-size: 100%; /* Opera 9.6+ */
        background-size: 100%; /* Современные браузеры */
      }
     
  7. artefakt777

    artefakt777

    Регистр.:
    15 июл 2012
    Сообщения:
    474
    Симпатии:
    119
    При таком варианте фон не растягивается, а так же подгоняется под экран.
     
  8. Trusteg

    Trusteg Создатель

    Регистр.:
    30 ноя 2012
    Сообщения:
    36
    Симпатии:
    11
    отдельно сделать два файла (с синим фоном и с панорамой), синий фон растянуть через background-size, на сколько надо, а панораму расположить внизу с помощью background-position
     
  9. mdss

    mdss ♖♘♗♕♔♗♘♖

    Moderator
    Регистр.:
    20 фев 2007
    Сообщения:
    1.134
    Симпатии:
    668
    гуглить parallax scrolling
     
  10. sergik74

    sergik74

    Регистр.:
    19 апр 2007
    Сообщения:
    295
    Симпатии:
    68
    О, верстаки нужна помощь!

    Вобщем есть фоном картинка - экран монитора
    В ней - видео

    Нужно: все это через css реализовать чтобы работало в Bootstrap 2 корректно
    Я по всяк пробовал - то видео респонсивится нормально, но картинка обрезается в контейнере, то картинка работает корректно - но видео не скалится - т.к. то в одном случае устанавливаю высоту конта и % для видео и наоборот ))))

    Вощем, если у кого есть решение - покажите?
    Фишки с css-trick не помогли (в частности это Перейти по ссылке )