2 background на одной странице

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

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

    artefakt777

    Регистр.:
    15 июл 2012
    Сообщения:
    455
    Симпатии:
    119
    Как такое в css прописать? Нужно чтобы получился первый background постоянно на верху и на всю ширину экрана.
    А второй background был под ним и состоял из кусков на всю ширину и высоту экрана.

    bg.jpg bg2.jpg
     
  2. The_Wolf

    The_Wolf

    Регистр.:
    21 окт 2013
    Сообщения:
    339
    Симпатии:
    189
  3. errogaht

    errogaht Постоялец

    Регистр.:
    15 май 2013
    Сообщения:
    50
    Симпатии:
    10
    Можно например так:
    http://jsfiddle.net/AC6h3/
    HTML:
    
    <html>
        <body>
        <style>
           
            body {
                margin:0;
                padding: 0;}
            div#head {
                background: linear-gradient(to right, #ff7400 0%, #fff600 100%);
                height: 100px;
                width: 100%;
                position: fixed;}
            div#body {
                height: 2000px;
                background: linear-gradient(to bottom, #5e3a11 0%, #494f2f 100%);}
        </style>
        <div id="head"></div>
        <div id="body"></div>
        </body>
    </html>
    
     
    mozal и artefakt777 нравится это.
  4. artefakt777

    artefakt777

    Регистр.:
    15 июл 2012
    Сообщения:
    455
    Симпатии:
    119
    Тогда как можно закрепить позицию (для модулей), чтобы она не съезжала при изменениях экрана?
    Получается, что background подстраивается под размеры экрана, а вот информация съезжает с места.
     
  5. mozal

    mozal Постоялец

    Регистр.:
    24 окт 2011
    Сообщения:
    58
    Симпатии:
    8
    а зачем сразу fixed?
     
  6. MadChild

    MadChild Постоялец

    Регистр.:
    23 янв 2013
    Сообщения:
    72
    Симпатии:
    5
    надо же что бы верхняя строка была всегда зафиксирована
     
  7. Andersol

    Andersol Постоялец

    Регистр.:
    1 окт 2012
    Сообщения:
    55
    Симпатии:
    28
    1. фон - position:fixed; height:200px(к примеру);
    2. фон - height:100%; padding-top:200px; box-sizing:border-box;
    Если не сработает, пропиши html, body{height:100%;}
     
  8. omgh

    omgh Создатель

    Регистр.:
    22 сен 2013
    Сообщения:
    21
    Симпатии:
    13
    Ну и собственно не забываем про старичков:
    HTML:
    
    background: -moz-linear-gradient(...); /* FF3.6+ */
    background: -webkit-gradient(linear,...); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(); /* Opera 11.10+ */
    background: -ms-linear-gradient(); /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient(); /* IE6-9 */
    
     
  9. Relaxbond

    Relaxbond Создатель

    Регистр.:
    28 май 2013
    Сообщения:
    19
    Симпатии:
    7
    Тогда уж так, и блоки получатся резиновые по высоте. Пихайте модули, какие хотите.
    HTML:
    <html>
        <body>
        <style>      
            body {
                margin:0;
                padding: 0;}
            div#head {
                position: relative;
                background: linear-gradient(to right, #ff7400 0%, #fff600 100%);
                width: 100%;}
            div#body {
                position: fixed;
                width: 100%;
                background: linear-gradient(to bottom, #5e3a11 0%, #494f2f 100%);}
        </style>
        <div id="head"></div>
        <div id="body"></div>
        </body>
    </html>
     
  10. shure348

    shure348 Создатель

    Регистр.:
    6 ноя 2012
    Сообщения:
    11
    Симпатии:
    2
    попробуйте указать свойства background через запятую
    body {
    background:
    url( images/aztec_block.png) 0 0 no-repeat,
    url(images/aztec_block.png) -576px 100% no-repeat;
    }