Vielleicht ist es Ihnen auch schon mal so gegangen: Sie haben eine tolle Hintergrundgrafik für Ihr neues Weblayout. Jetzt stellt sich die Frage, wie man es hinbekommt, dass die Grafik je nach Bildschirmgröße automatisch gezoomt wird. Es sieht schließlich nicht gerade schön aus, wenn der Seiteninhalt plötzlich über die Bildränder hinausragt.
Nun, da gibt es eine Lösung. Man muss zwar etwas tricksen. Doch es funktioniert ganz ohne JavaScript und nur mit ein paar CSS-Anweisungen.
Das Prinzip basiert einfach auf zwei DIV-Containern. Der erste beinhaltet das Hintergrundbild, der zweite den Kontent der Seite. Beide werden als Ebenen einfach übereinandergelegt. Fertig!
Wie das ganze dann aussieht, sehen Sie hier.
Gehen wir vielleicht etwas genauer auf den Seitenaufbau ein.
Fügen Sie im Header Ihrer HTML-Seite folgenden Style-Code ein:
<style type="text/css"> <!-- html{ margin:0; padding:0 0 0 0; height:100%; } body { padding:0; margin:0; height:100%; } #bg_img { background:#ffffff; margin:0 0 0 0; padding:0; height:100%; display:block; overflow:auto; } #bg_img p { margin:0; padding:2%; } #bg_img img { float:right; height:100%; width:100%; border:0px solid; margin:0 0 0 0; } --> </style>
Die beiden DIV-Kontainer im Body sehen dann so aus:
<div id="bg_img" style="z-index:0;"><img src="bg_img.jpg" width="200" height="200" border="0" alt="" /></div> <div style="position:absolute; top:0; left:0; z-index:1;"> Text Text Text Text Text TextText TextText TextText TextText TextText TextText TextText TextText TextText TextText Text Text TextText TextText TextText TextText TextText TextText TextText TextText TextText TextText Text Text TextText TextText TextText TextText TextText TextText TextText TextText TextText TextText TextT </div>
Das war’s dann auch schon.
Viel Spaß und Erfolg mit und bei Ihrem Projekt.
Super Sache, hab lang versucht es so hinzubekommen,
bis ich das hier gefunden habe *top*
Hallo!
Dein Link zur Seite ist leider defekt, würde die Lösung aber gerne kennen
Grüße!
Sorry, da habe ich beim Server-Umzug doch etwas übersehen. Der Link müsste nun wieder funktionieren.
Ich würde gern auch die Lösung kennen, nur der Link scheint noch immer nicht zu funktionieren
Gruß
Der Link funktioniert. Ich habe den Beitrag aber etwas überarbeitet, damit der Seitenaufbau vielleicht etwas klarer wird.