фиксированный бекграунд при определенной высоте

[sergeyvolk]

Привет. Есть картинка на бекграунд размерами больше чем разрешение экрана, то есть у нас появляются полосы прокрутки по вертикали и горизонтали. Я добавляю текст чтобы он был больше чем высота картинки. Теперь вопрос. Как сделать прокрутку по горизонтали и прокрутку до высоты картинки, и после этого картинка становится фиксированной при вертикальной прокрутке, то есть в начале у нас прокручивается и фон и текст, а после того как дошли до конца фоновой картинки, то у нас прокручиввается только текст. Думаю объяснил внятно. Где-то похожее я видел, только очень давно.

[PanSoul]

min-height и min-weightwidth

P.S. говорят эти правила помогут

Edited August 18, 2011 by PanSoul

[psywalker]

Привет. Есть картинка на бекграунд размерами больше чем разрешение экрана, то есть у нас появляются полосы прокрутки по вертикали и горизонтали. Я добавляю текст чтобы он был больше чем высота картинки. Теперь вопрос. Как сделать прокрутку по горизонтали и прокрутку до высоты картинки, и после этого картинка становится фиксированной при вертикальной прокрутке, то есть в начале у нас прокручивается и фон и текст, а после того как дошли до конца фоновой картинки, то у нас прокручиввается только текст. Думаю объяснил внятно. Где-то похожее я видел, только очень давно.

А покажи скриншоты того, как должно быть и как не должно.

[sergeyvolk]

min-height и min-weight

P.S. говорят эти правила помогут

Не работает.

Psywalker, я даже не знаю как это показать. Вроде описал все в первом посте

[sigma77]

Psywalker, я даже не знаю как это показать. Вроде описал все в первом посте

Лучше один раз увидеть...

Я тоже не совсем поняла, что должно получиться.

Варианты:

- background-attachment: fixed;

- overflow: auto/scroll (плюс возможно несколько дивов и js)

- высчитывать положение скрола, сравнивать его с высотой картинки и уже после этого менять у фона background-attachment

[sergeyvolk]

По скриншоту ясно, что контент превышает размеры бекграунда и вылезает за границы картинки на белый фон. Что мне надо: контент прокручивается вместе с бекграундом ровно до высоты фоновой картинки, после чего у меня прокручивается только контент, не вылезая за белый фон, то есть как бы бекграунд становится фиксированным. Надеюсь теперь понятно

Edited August 17, 2011 by sergeyvolk

[Softlink]

Я вчера еще сделал пример. Но он не совсем удовлетворяет условиям задачи и не стал его показывать. Т.е. сначала прокручивается текст, а потом уже фон. Но, пожалуй, выложу решение, может кто допилит.

http://alpatriott.ru/works/primer/fixfon.html

[psywalker]

Варианты:

- background-attachment: fixed;

- overflow: auto/scroll (плюс возможно несколько дивов и js)

- высчитывать положение скрола, сравнивать его с высотой картинки и уже после этого менять у фона background-attachment

- сделать <img> на странице с фоном и растянуть абсолютом её, и тогда она тупо будет растягиваться при большом контенте.

- сверху оставить бек, а снизу продлить полоску этого фона, а ещё лучше подобрать цвет фона, но это в мечтах)

[Softlink]

- сделать <img> на странице с фоном и растянуть абсолютом её, и тогда она тупо будет растягиваться при большом контенте.

- сверху оставить бек, а снизу продлить полоску этого фона, а ещё лучше подобрать цвет фона, но это в мечтах)

Ну судя по картинке, подобрать цвет фона не представляется возможным, а тянуть.. ну не знаю, будет ли смотреться на больших разрешениях?

[psywalker]

- сделать <img> на странице с фоном и растянуть абсолютом её, и тогда она тупо будет растягиваться при большом контенте.

- сверху оставить бек, а снизу продлить полоску этого фона, а ещё лучше подобрать цвет фона, но это в мечтах)

Ну судя по картинке, подобрать цвет фона не представляется возможным, а тянуть.. ну не знаю, будет ли смотреться на больших разрешениях?

Ок, но например полоску фона прдлить, я считаю, возможность есть. Посмотрти скрин http://screencast.com/t/XJTsRid26R6p . Внизу в фотошопе чуть продлить окончание, чтобы выйти на полоску, согласен?

[Softlink]

- сделать <img> на странице с фоном и растянуть абсолютом её, и тогда она тупо будет растягиваться при большом контенте.

- сверху оставить бек, а снизу продлить полоску этого фона, а ещё лучше подобрать цвет фона, но это в мечтах)

Ну судя по картинке, подобрать цвет фона не представляется возможным, а тянуть.. ну не знаю, будет ли смотреться на больших разрешениях?

Ок, но например полоску фона прдлить, я считаю, возможность есть. Посмотрти скрин http://screencast.com/t/XJTsRid26R6p . Внизу в фотошопе чуть продлить окончание, чтобы выйти на полоску, согласен?

Да черт его знает, может и можно Пока видно, что это именно картинка, судя по всему с перспективой и т.д. А как она будет выглядеть с полоской - непонятно.

[psywalker]

- сделать <img> на странице с фоном и растянуть абсолютом её, и тогда она тупо будет растягиваться при большом контенте.

- сверху оставить бек, а снизу продлить полоску этого фона, а ещё лучше подобрать цвет фона, но это в мечтах)

Ну судя по картинке, подобрать цвет фона не представляется возможным, а тянуть.. ну не знаю, будет ли смотреться на больших разрешениях?

Ок, но например полоску фона прдлить, я считаю, возможность есть. Посмотрти скрин http://screencast.com/t/XJTsRid26R6p . Внизу в фотошопе чуть продлить окончание, чтобы выйти на полоску, согласен?

Да черт его знает, может и можно Пока видно, что это именно картинка, судя по всему с перспективой и т.д. А как она будет выглядеть с полоской - непонятно.

Ну так щас никак. Но вот если в фотошопе её доделать, чтобы вывести на эту полоску, то тогда должна)

[sergeyvolk]

Кстати, желаемый результат достигается если для класса который смещает контент присвоить атрибут overflow:auto, но тогда появляется две полосы прокрутки.

[Softlink]

Кстати, желаемый результат достигается если для класса который смещает контент присвоить атрибут overflow:auto, но тогда появляется две полосы прокрутки.

Покажите пример.

[sergeyvolk]

Вот. Первая полоса прокручивает фон вместе с текстом ровно до границ картинки, после вторая полоса прокручивает только контент, не двигая фон

[Softlink]

да я код просил посмотреть)) Как делали?

[sergeyvolk]

Ах да, конечно

CSS:

* {padding: 0;margin: 0;}
body, html {background-image:url('../img/bg.jpg');background-repeat:no-repeat;width:1923px;color: #eee5de;height:1080px;}
.main {position: relative;min-height: 100%;overflow:auto;}
.content {margin: 50px 0 0 410px;position:absolute;}
.post {background: gray;height:auto;font-size:24px;width:800px;padding:20px;margin: 20px 0 0 0;}

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" xml:lang="ru">
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="main">
<div class="content">
<div class="post"><h1>Заголовок</h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>
<div class="post"><h1>Заголовок</h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>
<div class="post"><h1>Заголовок</h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>
<div class="post"><h1>Заголовок</h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>
<div class="post"><h1>Заголовок</h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>
</div>
</div>
</body>
</html>

[Softlink]

ну точно также и работает, как в моем примере. Сначала прокручивается контент, потом фон.

[sergeyvolk]

Да, и правда, не заметил, но только один нюанс: что если пользователь будет прокручивать страницу не колесом мышки?)

[Softlink]

Да, и правда, не заметил, но только один нюанс: что если пользователь будет прокручивать страницу не колесом мышки?)

Все будет прекрасно. Прям как вам и надо. Но так делают в основном тогда, когда целенаправленно хотят посмотреть то, что находится именно внизу

А контент да, его не посмотреть без скролла.

Edited August 17, 2011 by Softlink

[sergeyvolk]

Только ещё одно но: мне нужна возможность прокрутки и горизонтально, но если поставить атрибут у body overflow-x:auto; то появляется вторая вертикальная полоса прокрутки. Приветствуется использование js

[Softlink]

Ну можно еще как-то так извратиться, но не кросс. Но по-моему здесь лучше делать уже все через JS. Сделано неаккуратно, в качестве примера.

Edited August 17, 2011 by Softlink

[sergeyvolk]

Softlink, спасибо тебе за помощь, но тоже не вариант, ибо надо кросс. Может кто поможет с JS?

[Softlink]

Доделал до кросса( ), но это фигня конечно. Лучше через JS выпиливать.

[sergeyvolk]

Ну так что, никто не поможет с помощью js реализовать такое? Готов за помощь символически перекинуть на wm 100 рублей.

[psywalker]

Ну так что, никто не поможет с помощью js реализовать такое? Готов за помощь символически перекинуть на wm 100 рублей.

Я может быть и сделал бы, но уже потерял нить задачи и поэтому, если заново объяснишь всё и покажешь на примере, что нужно получить, то попробую помочь.