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.

Dieser Beitrag wurde am Montag, Juli 7th, 2008 um 12:40 geschrieben und unter der Kategorie HTML,CSS & Co. eingeordnet. Durch RSS 2.0 feed sind alle Antworten und Kommentare zu beobachten. You can leave a response, or trackback from your own site.