Witam, mam problem z szablonem html/css, a mianowicie chciałbym, aby w tle były chmury i góry, góry zawsze na dole, chmury na górze, przy czym oba obrazki skalowane do szerokości strony, więc mój szablon wygląda tak:

<body>
    <img src="img/gory.jpg" id="bg-b" />
    <div id="bg1">
      <img src="img/chmury.png" id="bg-t" />
      <div>TREŚĆ</div>
    </div>
</body>

a css tak:

@charset "utf-8";
html * {
	outline:none;
	margin: 0;
	padding: 0;
}
body {
	background-color: #8ebce8;
	position: relative;
	width:100%;
}
img#bg-t {
	width:100%;	
	position:absolute;
	top:0;
	z-index:-1;
}
img#bg-b {
	width:100%;
	position:absolute;
	bottom:0;
	z-index: -2;
}

Wszystko jest ok, png z chmurami nachodzi lekko na góry jak ktoś ma 150 toolbarów i widescreen, ale jest problem:
gdy tekstu jest za mało góry nie pojawiają się na samym dole strony (gdy jest więcej niż wysokość ekranu góry ładnie siedzą na dole). Po dodaniu stylu html, body {height:100%} zdjęcie z górami siedzi na dole strony, ale gdy tekstu jest więcej zostaje na swojej pozycji (dół ekranu, nie strony) i po przewinięciu w dół jest pod obrazkiem pusta przestrzeń.

Wiem jak rozwiązać taki problem, gdy dolny element ma stałą wysokość, ale w tym przypadku, aby strona skalowała się zależnie od rozdzielczości nie da się określić stałej wysokości obrazka gory.jpg, musi być 100% szerokości i tyle skalowania.