Как поотянуть фон в центре

okunev2 · July 17, 2011

Как такой фон можно потянуть по высоте, в центре вижу парент вроде как можно потянуть, но вопрос как?

Softlink · July 17, 2011

хедер и футер зафиксить по высоте. Центр тянуть двумя дивами. Один вкладываем в другой и каждому задаем бэграунд с этим фоном.

Т.е. диву-родителю задаем бэграундом левый фон и репит по y, а в него вкладываем второй див, которому задаем правый фон и также повторяем его по вертикали.

Когда вложенный будет растягиваться в высоту, он растянет и родителя. Будет все хорошо.

Есть еще вариант с множественным бг, но он не работает в ИЕ.

okunev2 · July 17, 2011

хедер и футер зафиксить по высоте. Центр тянуть двумя дивами. Один вкладываем в другой и каждому задаем бэграунд с этим фоном.
Т.е. диву-родителю задаем бэграундом левый фон и репит по y, а в него вкладываем второй див, которому задаем правый фон и также повторяем его по вертикали.
Когда вложенный будет растягиваться в высоту, он растянет и родителя. Будет все хорошо.
Есть еще вариант с множественным бг, но он не работает в ИЕ.

а примера нет такой верстки?

Softlink · July 17, 2011

вот такой вариант однажды предложила sigma77 http://jsfiddle.net/rbfmr/.

Посмотрите как сделано, поймете.

okunev2 · July 17, 2011

вот такой вариант однажды предложила sigma77 http://jsfiddle.net/rbfmr/.
Посмотрите как сделано, поймете.

там в примере справа и слева один и тот же фон повторяется, а у меня получается по высоте сверху картинка фикс и снизу а в центре тянучка в низ, ничерта не пойму, и тем более как получится растягивать блок где будет контент

Edited July 17, 2011 by okunev2

Softlink · July 17, 2011

Не вижу сложности.

Попробовал вам нарисовать.

Temiks · July 17, 2011

Можно сделать так

1. body задаем бг повторение по оси y, и ставим ему 100% высоты

2. делаем див, пишем ему 100% высоты и делаем ему бг верхней части картинки

3. делаем еще один див внутри первого, задаем ему тоже 100% высоты, бг нижнее прижимаем к низу

The End

Softlink зачем разделять повторяющееся бг на левый кусок и правый кусок? ведь вроде оно все повторяется, и зачем верх и низ фиксить?

Edited July 17, 2011 by Temiks

Softlink · July 17, 2011

Softlink зачем разделять повторяющееся бг на левый кусок и правый кусок? ведь вроде оно все повторяется, и зачем верх и низ фиксить?

А чтобы большую картинку не грузить. В центре же фон однородный, нафик его картинкой рендерить

Т.е. сделаем левому

background:#'цвет сайта' url(fon-left.jpg) repeat-y;

А второй в него вкладываем и задаем правый вырезанный фон.

Фиксить, я имел ввиду, что целым куском фон накладываем.

Edited July 17, 2011 by Softlink

okunev2 · July 17, 2011

Не вижу сложности.
Попробовал вам нарисовать.

это все я понимаю, но не понимаю если контент выше и ниже той части что у нас тянется как вложить дивы чтобы контент потянул это все

контент начинается вверху где фикс сверху и заканчивается на фикс нижнем, в этом как бы загвоздка тоже здесь

Edited July 17, 2011 by okunev2

Softlink · July 17, 2011

Хотя там вообще можно вырезать картинку высотой в 10пк и ее повторять по y.

okunev2 · July 17, 2011

Хотя там вообще можно вырезать картинку высотой в 10пк и ее повторять по y.

да это у прощает, но как быть с контентом котрые вверху фикс начинается, как он потянет блок родителя

Temiks · July 17, 2011

Softlink вот так можно (вырижите правильно только бг)

http://atemiks.wen.ru/test.html


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style type="text/css" >
            html, body {
                height: 100%;
                margin: 0;
                padding: 0;
                background: url(./y.jpg) repeat-y 50% 0;
            }
            div {
                height: 100%;
                background: url(t.jpg) no-repeat 50% 0;
            }
            div div {
                background: url(d.jpg) no-repeat 50% 100%;
            }
        </style>
    </head>
    <body>
        <div>
            <div>

            </div>
        </div>
    </body>
</html>

Softlink · July 17, 2011

ну у меня вот только что родился еще вариант. Подгружать один большой фон и цеплять к нему футер.

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

okunev2 · July 18, 2011

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

а нету примера?

Softlink · July 18, 2011

да примера нет, но тут не сложно понять, как мне кажется. Сделать боооольшой фон в высоту. Основная часть этой высоты и будет ваш центр. Вешаем его на див и все дела. Высота тянется - фон открывается.

okunev2 · July 18, 2011

да примера нет, но тут не сложно понять, как мне кажется. Сделать боооольшой фон в высоту. Основная часть этой высоты и будет ваш центр. Вешаем его на див и все дела. Высота тянется - фон открывается.

но внизу же фон сложно выбрать какой можно повторять, ничерта не пойму

Temiks · July 18, 2011

Извините конечно, что вмешаюсь, но чем вам мой вариант не подходит?

В центре же фон однородный, нафик его картинкой рендерить

Ты думаешь, что много сэкономишь трафика этим способом, если так сделать?

Edited July 18, 2011 by Temiks

okunev2 · July 18, 2011

Извините конечно, что вмешаюсь, но чем вам мой вариант не подходит?
В центре же фон однородный, нафик его картинкой рендерить
Ты думаешь, что много сэкономишь трафика этим способом, если так сделать?

он подходит, но у меня картинки в png, и там виден нахлест

okunev2 · July 18, 2011

Извините конечно, что вмешаюсь, но чем вам мой вариант не подходит?
В центре же фон однородный, нафик его картинкой рендерить
Ты думаешь, что много сэкономишь трафика этим способом, если так сделать?

вот сделал все так. но использовал пнг, так как без него ни как

тянется по y фон как ему сделать лтступ снизу и сверху на те блоки с которыми идет нахлест вся в этом проблема.

okunev2 · July 19, 2011

Так я и не поборол пнг чтобы такого нахлеста было, а если резать в jpg прозрачный слой ниже уже не стыкается с низом центра.

okunev2 · July 19, 2011

да примера нет, но тут не сложно понять, как мне кажется. Сделать боооольшой фон в высоту. Основная часть этой высоты и будет ваш центр. Вешаем его на див и все дела. Высота тянется - фон открывается.

Пробывал но видимо не то делаю. Не подкинете пример, ну очень буду благодарен

Softlink · July 19, 2011

Посмотрите http://jsfiddle.net/jpftn/

Набросал быстренько и не очень аккуратно все сделал, т.к. сам занят. Главное, принцип понятен.

okunev2 · July 19, 2011

Посмотрите http://jsfiddle.net/jpftn/
Набросал быстренько и не очень аккуратно все сделал, т.к. сам занят. Главное, принцип понятен.

спасибо но там на стыке тоже проблема, там светлее тянучка, а что в нахлест темнее

Softlink · July 19, 2011

я думаю эти моменты можно решить уже в фотошопе

okunev2 · July 19, 2011

я думаю эти моменты можно решить уже в фотошопе

ну тогда получается тоже нахлест полутени этой сделать ещё раз чтобы было темнее и тянуть.

Но вот ещё вопрос, текст у меня ниже футера немного:

Как текст ниже опустить, но чтобы он начинался в том же месте сверху?

okunev2 · July 19, 2011

я думаю эти моменты можно решить уже в фотошопе

да, если вытягивать в высоту сильно страницу, размер страницы капец

Sign In

Как поотянуть фон в центре

Question

Link to comment

Share on other sites

26 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information