Background-image к низу сайта

[fofan]

Хочу сделать бекграунд сайта таким: к низу прикреплено изображение а все что выше него - текстура неба.

Но фоновое изображение категорически не хочет сползать вниз.

Вот код:

body {
   background-color: #000000; /*цвет фона*/
   background-image: url(/img/23.jpg); /*подключаем изображения*/
   background-position:  left bottom; /*позиция изображения, по центре екрана, прижатый к вверх*/
   background-repeat: no-repeat; /*не повторять изображение ни по одной оси*/
   color:#000000;
   font-family: Verdana, Arial, Helvetica, sans-serif; 
   font-size: 12px;
   }

[Mr.Black]

попробуй поставить не в боди а в хтмл

[fofan]

попробуй поставить не в боди а в хтмл

не помогло

[Gaspode]

html {
   background: url(/img/23.jpg) left bottom no-repeat;
   height: 100%;
}

А так?

[fofan]

html {
   background: url(/img/23.jpg) left bottom no-repeat;
   height: 100%;
}

А так?

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

[Gaspode]

Тогда min-height: 100%;

[Softlink]

Тогда min-height: 100%;

Неуказывание высоты 100% для html и body может аукнуться в дальнейшем. Лучше сделать еще одну обертку и в ней прописать фон.

[fofan]

Тогда min-height: 100%;

Неуказывание высоты 100% для html и body может аукнуться в дальнейшем. Лучше сделать еще одну обертку и в ней прописать фон.

я пробовал и обертку, только в ней такая же проблема если не указывать высоту она будет делаться под высоту headera(высота указана только у него) а если 100% - будет 100% экрана

вот CSS:

body {
 	color:#000000;
	font-family: Verdana, Arial, Helvetica, sans-serif; 
  	font-size: 12px;
	}
p {
	margin: 10px 0 10px 0;
	line-height: 140%;
	text-align: justify;
	}
h1 {
	font-weight: normal;
 	font-size: 20px;
	text-align: center;
	padding-bottom: 5px;
	}
h2 {
	font-weight: normal;
 	text-align: center;
	font-size: 17px;
	padding-top: 10px;
	padding-bottom: 5px;
	}
h3 {
	font-weight: normal;
	font-size: 14px;
	text-align: center;
	font-weight: bold;
 	}

h4 {
	text-align: center;
	}

ol {
	margin: 10px 0 10px 15px;
 	}

ul {
	margin: 10px 0 10px 15px;
 	}

a {color: #0054a6;
	}

a:hover {
    color: #d20000;
   } 


.main {
 	margin: 0 auto;
	width: 900px; 
    display: block; 
}



.header {
	height: 160px;
	display: block; 
	background: url(/img/bg_head.jpg) no-repeat center ; 	
	font-family: "Times New Roman";
	}

[Softlink]

ой, извиняюсь, что сбил с толку. Думал про одно, написал совсем другое. Не обертку надо конечно. А просто див в самый конец вставить с отрицательным маржином. Вот так сделать можно. Но если контента нет, то и фон будет не внизу. Т.е. в любом случае надо сделать "толкающий" див и задать ему высоту в 100%.

[fofan]

ой, извиняюсь, что сбил с толку. Думал про одно, написал совсем другое. Не обертку надо конечно. А просто див в самый конец вставить с отрицательным маржином. Вот так сделать можно. Но если контента нет, то и фон будет не внизу. Т.е. в любом случае надо сделать "толкающий" див и задать ему высоту в 100%.

спасибо огромное!

p.s. первый нормальный модератор, который реально помог...

[Nanto]

html{
background:transparent url("/2.jpg") repeat 0 0;
width:100%;
height:100%;
}
body{
background: transparent url("/1.jpg") no-repeat 0 100%;
width:100%;
height:auto !important;
height:100%;
min-height:100%;
}

Edited November 28, 2011 by Nanto

[zhigunov]

огромное спасибо, помогло!

Edited December 2, 2011 by zhigunov