Вопрос про расположение фоновой картинки

Shilgya · July 27, 2007

есть у меня страница с примерно такой структурой:

<html><body>
<div id="all"></div>
<div id="footer"></div>
</body></html>

К ней полагается следующий css:

html, body {
 height: 100%;
}
#all {
 min-height: 100%;
}
* html #all {
 height: 100%;
}
#footer {
 clear: both;
 height: 136px;
 margin-top: -136px;
}

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

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

Сразу напрашивается решение - разместить картинки фоном для html, body и #all.

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

Кстати, наблюдаем тот самый редкий случай, когда оригинальное видение css в браузерах MSIE (5.0, 5.5, 6, 7 в этом плане оказались одинаковы) пошло на пользу - в IE фоновое изображение на нужном месте.

Результаты моих изысканий находятся здесь: http://fvsr.ru/highway/

Вот каким бы образом разместить фон в нижнем левом углу для всех браузеров?

{...перенесено в Слои kiD}

ARA · July 27, 2007

Создай DIV, размести его в абсолютных координатах, и задай z-index!

Что-то подобие http://forum.htmlbook.ru/index.php?showtopic=4464 смотри самый нижний пример, блок

, он постояно внизу, тока задай ему фиксированое позиционирование!

Понял кака?

Shilgya · July 27, 2007

видимо стоило мне уточнить, что решить вопрос надо без добавления лишних блоков, html-шаблон вообще менять нельзя.

strix · July 27, 2007

а если попробовать поменять местами определения фона, вместо:

body {
 background: url(/images/highway_top_bg.jpeg) top repeat-x;
 color: #fff;
}
#all {
 background: url(/images/highway_bottom.jpeg) left bottom no-repeat;
}

написать:

body {
 background: url(/images/highway_bottom.jpeg) left bottom no-repeat;
 color: #fff;
}
#all {
 background: url(/images/highway_top_bg.jpeg) top repeat-x;
}

Shilgya · July 27, 2007

была такая попытка. Не получается. Дело в том, что уже body имеет высоту 100%. И эти сто процентов считаются от высоты окна браузера, а не от всего документа.

strix · July 27, 2007

фон для #all у вас отображается в ФФ в правильном месте - внизу этого блока....

кроме добавления слоя абсолютно позиционированного не вижу пока решения...

может, как- то подвал влияет - попробуйте абсолютное позиционирование, может что получится

yopopt · July 27, 2007

Интересно. Я бы сделал так:

Фон из #all перен?с в #content, а сам #content изменил так:

#content {
background:transparent url(/images/highway_bottom.jpeg) no-repeat scroll left bottom;
padding:290px 0 137px 320px;
width:580px;
}

То есть заменил margin на padding и добавил отступ снизу. Фон опустился и теперь надо поднять футер:

#footer {
background:transparent url(/images/bottom_pic.gif) no-repeat scroll 630px 70px;
clear:both;
font-size:90%;
height:60px;
padding:77px 0 0 320px;
position:relative;
top:-137px;
}

Я думаю комментарии не требуются - вс? просто.

Shilgya · July 31, 2007

Спасибо. Такая попытка тоже была, безуспешно.

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

body > #all {
 overflow: hidden;
}

собственно, вот и вс?. overflow: hidden скрывает то, что не поместилось в элемент. Если не указана явно высота, то высота увеличивается настолько, чтобы вместить содержимое, а значит можно успешно прибивать к нижнему краю. Но в ИЕ6 существует ошибка (в ИЕ7 е? уже нет), из-за которой высота не увеличивается, а вычисляется автоматически, и не умещающееся содержимое скрывается. Но ие6 не понимает дочерних селекторов, чем мы и воспользовались.

yopopt · July 31, 2007

Нда...

Shilgya · July 31, 2007

Нда...

что-то не так? Критика интересна.

yopopt · July 31, 2007

Просто не понял сразу как Вам в таком простом макете мог понадобиться overflow... Посмотрел. Особенно забавно margin-top:-337px; в #footer. Я Вам написал простое решение в посте #7. Зачем здесь придумывать конструкции типа body > #all {overflow: hidden;} я не понимаю.

Shilgya · August 1, 2007

margin-top:-337px; в #footer - это остатки от прежних экспериментов, которых в чистовом варианте не будет. А будет более правильное значение.

Теперь у меня вопрос. Как без overflow добиться того, чтобы #content имел размер равный высоте страницы, а не высоте окна? в IE всех версий так и происходит, но это всего лишь 60% посетителей, а есть желение показать правильное оформление всем.

Sign In

Вопрос про расположение фоновой картинки

Question

Link to comment

Share on other sites

11 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

Join the conversation

Обсуждения

Important Information