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

PRUDNIKOV

PRUDNIKOV

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

Как только не пытался и через div, в общем не получилось пока что..
Прошу Вас подойти серьезно к вопросу и подробно описать реализацию! Гуглить не предлагайте, этим сегодня целый день занимался!
 
Да побывал repeat-y толку от него меньше чем repeat-x с процентами, не помогло не фига((
 
для боди сделать фоном бг1, затем в нужном месте - див с шириной 100% с фоном бг2. или я чего то не понимаю в вопросе
 
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(http://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>
 
Или пойти от обратного, сделать фон2 в body repeat-y, а первый фоном в header.
 
тут в любом случае нужно тянущийся бэк в боди, а наверх див с фиксированной картинкой код будет такой:
Код: 
<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
 
Всё гораздо проще:
Код: 
<body class="other">
</body>

body {
background:url(blablabal.png)no-repeat transparent;}
body .other {
background:url(ololololo.png)repeat #fff;}
Надеюсь помог.
 
добавлю вариант с css3 -
HTML: 
body {background:url("../images/background.jpg") no-repeat center top, url("../images/background_l.jpg") repeat center top;}
понятно, что работает не во всех браузерах
есть так же способ со скриптами
Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.
 
есть подозрение по последнему скрипту, что jquery создает нагрузку... я прав?
 
Войдите или зарегистрируйтесь для ответа.
Назад
Сверху