nicht angemeldet
Horizontal mitwachsendes Layout/Hintergrundbild
Gunnar BittersmannHallo SelfHTML'er!
Das Problem:
Ich habe ein Weblayout das ich gern auf Auflösungen ab 1024 zum Laufen bringen möchte. Der Kniff daran ist: Im Hintergrund soll eine Grafik sein,
welche beim horizontalen "Aufziehen" des Fensters mitwachsen soll und zudem
möglichst immer am unteren Rand ausgerichtet sein soll.
Ich habe mir daran nun schon die Zähne ausgebissen. Leider hab ich nur eine Lösung die so "halb zufriedenstellend" ist.
Ein Beispiel gibt es hier:
http://www.tausend-und-eins.de/austausch/test/
BackDiv_l und -_r sorgen dafür das das Bild sich mitskaliert und backpic enthält eine 1Pixel-breite Grafik die als Verbindung dient.
<body>
<div id="backpic">
<div id="backdiv_l2"></div>
<div id="backdiv_r2"></div>
<div class="clear"></div>
</div>
html {
padding:0;
margin:0;
border:0;
font-family: Arial, Helvetica, sans-serif;
background-color: #efefee;
overflow-x:hidden;
}
body {
min-height: 100%;
height: 100%;
padding:0;
margin:0;
border:0;
}
.clear {
clear: both;
float: none;
}
#backpic {
min-width: 1100px;
background-image: url(../pix/backpixel.jpg);
background-repeat: repeat-x;
width: 100%;
height: 940px;
}
#backdiv_r2 {
display: block;
float: right;
background-image: url(../pix/backright.jpg);
background-repeat: no-repeat;
min-height: 100%;
min-width: 640px;
z-index: -90;
background-position: bottom left;
width: 25%;
}
#backdiv_l2 {
display: block;
float: left;
background-image: url(../pix/backleft.jpg);
background-repeat: no-repeat;
min-height: 100%;
max-width: 600px;
z-index: -90;
background-position: bottom right;
width: 40%;
}
Anforderung:
Wie man an der testseite schön sieht ist eine "min-width" definiert,
So kann "rechts" nicht an "links" heranrutschen und der Text bleibt sichtbar.
Doch unten erscheint die schwarze Farbe des html-tag.
Das Bild soll jedoch möglich konstant immer am unteren Rand bleiben
ohne das der typische Fehler "position: absolute; bottom: 0; mit dem Scrollen passiert...
Ich werde Wahnsinnig... weiss Jemand eine elegante Lösung?
Danke!
Tachi
-
@@Tachikoma:
nuqneH
backpic enthält eine 1Pixel-breite Grafik die als Verbindung dient.
1 Pixel ist nicht gut.
Dein Beispiel lässt nicht erkennen, warum es denn eine Grafik sein soll.
Doch unten erscheint die schwarze Farbe des html-tag.
Keine Ahnung, was du da erscheinen siehst.
Mir erscheint es aber so, dass du nicht das html-Tag meinst.
Ich werde Wahnsinnig... weiss Jemand eine elegante Lösung?
Moderne Browser beherrschen mehrere Hintergrundbilder für ein Element. [CSS3-BACKGROUND]
Für veraltete Browser brauchst du halt drei Elemente mit jeweils einem Hintergrundbild, wobei du html und body mit einbeziehen solltest.
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
Hallo Gunnar!
Zunächst mal Danke für die Antwort!Dein Beispiel lässt nicht erkennen, warum es denn eine Grafik sein soll.
Es handelt sich bei der "richtigen Seite" um ein Foto.
Deshalb soll die Grafik an dieser Stelle skalierbar sein.
"LINKS" und "RECHTS" stehen für zwei Hälften eines Fotos und
die 1px-Grafik ist ein Ausschnitt dessen, bei dem es nicht auffällt
das er verzerrt ist. Also eine Wand z.B.Keine Ahnung, was du da erscheinen siehst.
Mir erscheint es aber so, dass du nicht das html-Tag meinst.
Tschuldigung! Ich meine wohl das "html-Element".
html {
padding:0;
margin:0;
border:0;
font-family: Arial, Helvetica, sans-serif;
background-color: #000;
overflow-x:hidden;
}Ich werde Wahnsinnig... weiss Jemand eine elegante Lösung?
Moderne Browser beherrschen mehrere Hintergrundbilder für ein Element. [CSS3-BACKGROUND]
Für veraltete Browser brauchst du halt drei Elemente mit jeweils einem Hintergrundbild, wobei du html und body mit einbeziehen solltest.
Qapla'
Vielen Dank auf jeden Fall schon mal... leider hilft das nicht konkret bei dem Problem. Ich möchte ja gern vermeiden das es überschneidungen gibt... :-( oder verstehe ich da was falsch?
-
-
Grüße,
anfangen würde ich hier
MFG
bleicher
