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.