два background в wp (резиновых)

Тема в разделе "Веб-дизайн", создана пользователем PRUDNIKOV, 20 окт 2011.

Модераторы: zek24
  1. PRUDNIKOV

    PRUDNIKOV Постоялец

    Регистр.:
    12 апр 2009
    Сообщения:
    85
    Симпатии:
    4
    Привет. В моем блоге есть фон
    PHP:
    body {
            
    background:#000 url(images/bg.jpg) no-repeat center top;
    }
    К этому фону хочу сделать продолжение. Отрезать в фотошопе низ основного фона он будет bg2.jpg и что бы отрезанный кусок был после основного фона и повторялся в низ, не трогая основной верхний фон bg.jpg..
    Задача вроде простая а реализую её уже не первый день.

    Как только не пытался и через div, в общем не получилось пока что..
    Прошу Вас подойти серьезно к вопросу и подробно описать реализацию! Гуглить не предлагайте, этим сегодня целый день занимался!
     
  2. najden

    najden Постоялец

    Регистр.:
    1 авг 2007
    Сообщения:
    60
    Симпатии:
    4
    В ксс через афтер

    Попробуй в CSS прописать:
     
  3. PRUDNIKOV

    PRUDNIKOV Постоялец

    Регистр.:
    12 апр 2009
    Сообщения:
    85
    Симпатии:
    4
    Да побывал repeat-y толку от него меньше чем repeat-x с процентами, не помогло не фига((
     
  4. Jaarg

    Jaarg

    Регистр.:
    18 авг 2008
    Сообщения:
    503
    Симпатии:
    97
    для боди сделать фоном бг1, затем в нужном месте - див с шириной 100% с фоном бг2. или я чего то не понимаю в вопросе
     
  5. polyetilen

    polyetilen Заблокирован

    Регистр.:
    10 авг 2006
    Сообщения:
    814
    Симпатии:
    474
    bg2.jpg вставить в body и пусть повторяется по всей высоте repeat-y, потом после body добавить div и туда добавить верхний фон
    HTML:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Background</title>
    
    <style type="text/css">
    body{
        margin:0;
        /* тут сплошной фон */
        background:#000 url(https://www.nulled.cc/nulled_v4/misc/skin/bg_body.jpg) repeat-y center top;
    }
    .back2{
        /* тут верхний фон */
        background:url(http://www.google.com/logos/2011/mary_blair-2011-hp.jpg) no-repeat center top;
    }
    </style>
      
    </head>
    
    <body>
        <div class="back2">
        
        content
        <br>
        content
        <br>
        content
        <br>
        content
        <br>
        content
        <br>
        content
        <br>
        content
        <br>
        content
        <br>
        content
        <br>
        
        </div>
    </body>
    </html>
    
    
     
    PRUDNIKOV нравится это.
  6. KainCq

    KainCq Постоялец

    Регистр.:
    15 июн 2011
    Сообщения:
    118
    Симпатии:
    22
    Или пойти от обратного, сделать фон2 в body repeat-y, а первый фоном в header.
     
  7. ko1obok

    ko1obok Писатель

    Регистр.:
    20 сен 2011
    Сообщения:
    9
    Симпатии:
    0
    тут в любом случае нужно тянущийся бэк в боди, а наверх див с фиксированной картинкой код будет такой:
    Код:
    <body>
     <div class="inner">
     </div>
    </body>
    
    в css:
    body{
    background-image: url(images/bg2.jpg);
    background-repeat:repeat-y;
    }
    .inner{
    background-image: url(images/bg.jpg);
    background-repeat:no-repeat;
    background-position: top center;
    width:100%;
    height:100%;
    }
    
    все остальное влаживайте в inner, как-будто это body
     
  8. kyakapa4a

    kyakapa4a Постоялец

    Регистр.:
    22 янв 2009
    Сообщения:
    71
    Симпатии:
    21
    Всё гораздо проще:
    Код:
    <body class="other">
    </body>
    
    body {
    background:url(blablabal.png)no-repeat transparent;}
    body .other {
    background:url(ololololo.png)repeat #fff;}
    Надеюсь помог.
     
  9. collapse

    collapse

    Регистр.:
    12 янв 2007
    Сообщения:
    204
    Симпатии:
    62
    добавлю вариант с css3 -
    HTML:
    body {background:url("../images/background.jpg") no-repeat center top, url("../images/background_l.jpg") repeat center top;} 
    понятно, что работает не во всех браузерах
    есть так же способ со скриптами
    http://www.chicowebdesign.com/blog/2010/10/21/updated-jquery-multiple-background-plug-in/
     
  10. zasxzasx

    zasxzasx Писатель

    Регистр.:
    10 апр 2006
    Сообщения:
    7
    Симпатии:
    0
    есть подозрение по последнему скрипту, что jquery создает нагрузку... я прав?