Выравнивание background-image

[Icen]

Здравствуйте!

Возникла такая проблема: фон который я истользую отказывается выравниваться по низу страницы и Opera и FF, как нистранно в IE7 и IE7 все рабатает так как хотелось бы. Где то читал, что такое возможно если использовать абсольтное позиционирование, но у меня везде используется относительное.

Буду рад любым предположениям. Заранее благодарен.

P.S.: адрес странички: http://soft.als-krsn.ru/

Css:

@import "reset.css";
@import "jqueryslidemenu.css";

* html, body #container {
height: 100%;
}

body {height: 100%;background: #e3ebff url(../img/bg-body.jpg) repeat-x bottom;color:#282726;font:12px Arial,sans-serif;}

#container {
background:white;
position: relative;
margin:0 auto 0;
width:1001px;
min-height:100%;
height:auto !important;
height:100%;
}

#header {background:#20729d url(../img/header-bg.jpg) no-repeat;width:100%;height:146px;}
#search {position:relative; top:7px; left:570px; width: 425px;}

#left {
	width: 150px;
	float: left;
	margin: 10px 8px 0 8px;
	overflow:hidden;
}

#centr {
	width: 660px;
	float: left;
	margin: 10px 0 0 0;
	overflow:hidden;
}

#right {
	width: 150px;
	float: left;
	margin: 10px 8px 0 8px;
	overflow:hidden;

}

.clearfloat {
clear: both;
}

.empty {
	height: 58px;
}

#footer {
	position: relative;
	background:#fd5123 url(../img/footer-bg.jpg) repeat-x bottom;
	width: 1001px;
	height: 58px;
	margin: -58px auto 0;
}
#footer2 {background:#fd5123 url(../img/footer-bg2.jpg) no-repeat top; width:113px; height:58px; float:right;}

.logo A {display:block;height:100px;position:relative;top:44px;left:140px;text-indent:-9999px;width:370px;}


.blok {
	background: #f1f6f9 url(../img/blok-title.gif) no-repeat top left;
	width: 150px;
	font-size: 15px;
	font-weight: bold;
	padding: 10px 0 0 10px;
	margin-bottom: 10px;
}

.blok-body {
	width: 138px;
	margin: 0 0 0 -10px;
	padding: 12px 5px 5px;
	border-right: 1px solid #d7e5ec;
	border-bottom: 1px solid #d7e5ec;
	border-left: 1px solid #d7e5ec;
	font-size: 12px;
	font-weight: normal;
	text-align: left;
}

.blok-body h3{
	font-size: 12px;
	font-weight: bold;
	text-align: left;
}
.blok-body a {
	color: #013447;
	font-size: 12px;
	font-weight: bold;
	margin: 2px 10px 0 0;
}

.blok-body a:hover {
	color: #005b7d;
	font-weight: bold;
	text-decoration: none;
}
/* уЯРЬ­ЯэУРЯтВ ьЬРЬыЫЧ */

.news {
	margin-bottom:15px;
	width: 100%;
	background-color: #fff;
}
.short-news {
	padding: 0 10px;
}

.short-news p {
	text-align: justify;
	text-indent: 1.8em;

}

.news-title {
	width: 424px;
	height: 38px;
	background: url(../img/leftslide-header.gif) #e5f0f4;
	color : #3576f8;
	font-size : 14px;
	font-weight : bold;
	padding: 4px 0 0 10px;
}

.news-footer {
	width: 660px;
	height: 28px;
	background: url(../img/line.gif) #e5f0f4 no-repeat left;
	text-align: right;

}

.news-footer a {
	color: #013447;
	font-size: 12px;
	font-weight: bold;
	margin: 2px 10px 0 0;
}

.news-footer a:hover {
	color: #005b7d;
	font-weight: bold;
	text-decoration: none;
}

[Nekromancer]

попробуй так:

background: #e3ebff url(../img/bg-body.jpg) center bottom repeat-x;

Edited March 4, 2009 by Nekromancer

[Great Rash]

body {
	background: url('img/111.png') bottom left repeat-x;
}

Странно, у меня все выравнивается без проблем. Mozilla Firefox/3.0.6, больше нигде не проверял.

И даже так выравнивается без проблем

body {
	background: url('img/111.png') repeat-x bottom;
}

А у вас фон вообще видно где-нибудь на странице? А то может путь до картинки кривой?

Edited March 4, 2009 by Great Rash

[Icen]

background: #e3ebff url(../img/bg-body.jpg) repeat-x center bottom;

К сожалению не помогло

А у вас фон вообще видно где-нибудь на странице? А то может путь до картинки кривой?

Да, фон видно. Фоновым изображением является градиент, который как раз нужно "притянуть" к низу, фоновым цветом является самый светлый цвет в градиенте, который градиент как бы завершает. И вместо того чтобы "завершать", он наоборот "начинает", получается каша. Можете посмотреть по ссылке указаной выше...

[Nekromancer]

вот хз, скачал ваш фон, взял ваш код, создал такие же папки.. всё работает, может проблема не в CSS?

[ZoNT]

Убери у body и html во всех стилях height:100% и будет тебе щастье.

[Nekromancer]

да у меня даже и сним работало, хотя тоже об этом подумал...

[Great Rash]

Ага, внатуре дело в height: 100%; у body.

[Icen]

Ага, внатуре дело в height: 100%; у body.

Согласен, но высота 100% используется для прижатия футера к низу. Убрал, градиент работает как надо, но футер пополз вверх...

[ZoNT]

тогда тебе градиент надо не у боди указвать, а делать див, помещать его в боди, а уже всё остальное в этот див... Диву указывать градиент...

[Icen]

тогда тебе градиент надо не у боди указвать, а делать див, помещать его в боди, а уже всё остальное в этот див... Диву указывать градиент...

Сделал как вы сказали. Заменил начало вот на это:

html, body {
	height: 100%;
}

body {
	color:#282726;
	font:12px Arial,sans-serif;
}
#grad {
	background: #e3ebff url(../img/bg-body.jpg) repeat-x center bottom;
}

Получилось вот что: Когда много контента всё работает как надо, а тот когда мало контента, футер не прижимается...