два фиксированых фона

Wanamingo · September 14, 2010

Добрый вечер перешёл на css совсем недавно, раньше верстал табличками. Понадобилось сделать страничку с двумя фонами, идея в том что первый фон остаётся неизменным, а второй будет меняться в зависимости от контента. Фаерфокс и опера отображают шикарно (правда при проверке на браузершотс фф3.5 тоже себя неадекватно повёл, но я склонен думать что это глюки браузершотс он просто не дал до конца загрузиться странице) а вот с эксплорером возникли проблемы. 7 и 8 версии не отображают контента 6 отображает но он съехал на один скрин плюс нет прозрачности в пнг но это отдельный вопрос.

вот код:

<html>
<head>
<title>шаблончег</title>
<style>
body {
	margin: 0px;
	padding: 0px;
	border: 0px;
	background: #dde2ed url('images/bg.jpg') no-repeat fixed center bottom;
	height: 100%;
	width: 100%;
}
#dom {
	height: 100%;
	width: 100%;
	background: transparent url('images/dom.png') no-repeat fixed left bottom;
	margin: 0px;
	padding: 0px;
	border: 0px;
	position: fixed;
	z-index: -2;
}
#cont {
	background: transparent url('images/fon.png') repeat scroll;
	margin: 0px 50px 0px 300px;
	padding: 0px 10px;
	border: 0px;
	text-align: justify;
	position: relative;
	min-height: 100%;
	font: normal normal normal 80% normal arial, sans-serif;
}
* html #cont {
	height: 100%;
}
#head {
	background: transparent;
	margin: 0px;
	padding: 0px;
	border: 0px;
	text-align: right;
}
#end {
	position: relative;
	height: 50px;
}
#foot {
	background: transparent;
	margin: -30px 50px 0px 300px;
	padding: 0px 10px;
	border: 0px;
	text-align: center;
	position: relative;
	height: 30px;
	font: normal normal normal 60% normal arial, sans-serif;
}
</style>
</head>
<body>
<div id="dom">
</div>
<div id="cont">
<div id="head">ссылка | ссылка | ссылка<br><br></div>
Lorem ipsum dolor sit amet...
<div id="end"></div>
</div>
<div id="foot">
© бла-бл-бла 2010
</div>
</body>
</html>

скрины: ie6, ie7, ie8, ff3.0, ff3.5, ff3.6, ff4.0, chrome5.0, opera8.54, opera9.63, opera9.80, safari4, safari5

пример странички: здесь

как можно добиться максимальной кроссбраузерности? ещё буду благодарен если укажите на другие ошибки.

psywalker · September 14, 2010

Один фон повесь на боди, а второй на контейнер, но только для начала растяни его на min-height: 100%; и ненадо никакие position: fixed;

Wanamingo · September 14, 2010

Один фон повесь на боди, а второй на контейнер, но только для начала растяни его на min-height: 100%; и ненадо никакие position: fixed;

тогда для контента position: absolute; ?

первый фон и так на боди

убрал у контейнера со вторым фоном fixed, поставил min-height: 100% теперь страничка и в фаерфоксе ведёт себя так же как в 6 эксплорере

если для контента ставлю position: absolute; вверх уходит только футер (здесь ещё конструкция для прижимания футера к нижнему краю)

ааа кажется доперло нужно контент внутрь контейнера со вторым фоном загнать

вроде работает но футер перестал к низу жаться

Wanamingo · September 14, 2010

ничего не понимаю для контента вставлено min-height: 100%; но почему-то не растягивает=(

#end {

position: relative;

height: 50px;

} нужен чтобы контент не наползал на футер

для футера прописано margin: -30px 50px 0px 300px; и height: 30px; от чего он должен нползать на область end

почему не работает?

Vlad · September 15, 2010

А чо без доктайпа то страница?

Wanamingo · September 15, 2010

А чо без доктайпа то страница?

вот только сейчас прочитал что это за зверь такой и для чего он нужен

Wanamingo · September 15, 2010

хмммм ставлю доктайп и min-height: 100%; для контейнера с вторым фоном перестаёт работать

psywalker · September 15, 2010

Сделай по схеме, как тут http://psywalker.ru/Forum/Footer_bottom/main.html

Wanamingo · September 15, 2010

min-height вложенный в другой див работает только если высоту жёстко прописать

psywalker · September 15, 2010

Ну всё правильно, пропиши высоту у body, html

Wanamingo · September 15, 2010

ещё почему-то в моём варианте реализации перестал восприниматься цвет фона футера правда он туда случайно попал но всё же

у боди и хтмл прописано height: 100%;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<title>шаблончег</title>
<style>
*{ 
	margin: 0; 
	padding: 0;}
html { 
	height: 100%;
	overflow: auto; }
body {
	background: #dde2ed url('images/bg.jpg') no-repeat fixed center bottom;
	height: 100%;
}
#dom {
	min-height: 100%;
	background: url('images/dom.png') no-repeat fixed left bottom;
}
#cont {
	min-height: 100%;
	background: url('images/fon.png');
	margin: 0px 50px 0px 300px;
	padding: 0px;
	text-align: justify;
	font: 80% arial;
	position: relative;
}
# foot {
	position: absolute;
	bottom: 0; 
	left: 0;
	height: 50px; 
	width: 100%;
	background: red;
}
p { 
	padding-bottom: 70px;
}
</style>
</head>
<body>
<div id="dom">
<div id="cont">
<br>
<p>Lorem ipsum dolor sit amet...</p>
<div id="foot">
Футер
</div>
</div>
</div>
</body>
</html>

Wanamingo · September 15, 2010

избавился от контейнера с контентом не помогло

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<title>шаблончег</title>
<style>
*{ 
	margin: 0; 
	padding: 0;
}
html { 
	height: 100%; 
	overflow: auto;
}
body {
	background: #dde2ed url('images/bg.jpg') no-repeat fixed center bottom;
	height: 100%;
}
#dom {
	min-height: 100%;
	background: url('images/dom.png') no-repeat fixed left bottom;
	padding: 0px 50px 0px 300px;
	position: relative;
}
# foot {
	background: url('images/fon.png');
	position: absolute;
	bottom: 0; 
	height: 50px; 
	width: 100%;
}
p { 
	background: url('images/fon.png');
	padding-bottom: 70px;
}
</style>
</head>
<body>
<div id="dom">
<p>Lorem ipsum dolor sit amet...</p>
<div id="foot">
Футер
</div>
</div>
</body>
</html>

футер по прежнему игнорирует бэкграунд

psywalker · September 15, 2010

# foot вот тут раздельно почему, решётка и селектор?

Wanamingo · September 15, 2010

спасибо это от невнимательности не заметил просто

Wanamingo · September 15, 2010

вот такой вот код вроде работает

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<title>шаблончег</title>
<style>
*{
	margin: 0;
	padding: 0;
}
html {
	height: 100%;
	overflow: auto;
}
body {
	background: #dde2ed url('images/bg.jpg') no-repeat fixed center bottom;
	height: 100%;
}
#dom {
	min-height: 100%;
	background: url('images/dom.png') no-repeat fixed left bottom;
	position: relative;
}
#foot {
	position: absolute;
	bottom: 0;
	width: 100%;
}
p {
	background: url('images/fon.png');
	margin: 0px 50px 0px 300px;
}
</style>
</head>
<body>
<div id="dom">
<p>Lorem ipsum dolor sit amet...</p>
<br>
<div id="foot">
<p>Футер</p>
</div>
</div>
</body>
</html>

щас буду проверять на других браузерах

psywalker · September 15, 2010

Давай, отпишись потом.

Wanamingo · September 15, 2010

стало получше почти во всех браузерах отображается нормально в эксплорере 6 и ниже второй фон липнет не к нижней границе окна а к низу страницы и с оперой 9.80 проблемы в остальном я доволен оставлю так только для эксплорера гифы отрисую psywalker огромное тебе спасибо

psywalker · September 15, 2010

Всегда рад помочь хорошим людям

Sign In

два фиксированых фона

Question

Link to comment

Share on other sites

17 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

Join the conversation

Обсуждения

Important Information