Anzeige
Tutorialbeschreibung

100-%-Hintergrundbild

100-%-Hintergrundbild

Nahezu jeder Webdesigner wird im Laufe seines Lebens mit der Frage konfrontiert : "Wie schaffe ich es, dass das Hintergrundbild die Seite komplett ausfüllt, ohne etwas vom Bild abzuschneiden?"

Hier zeige ich euch, wie ihr das ganz leicht hinbekommt.


Bemerkung: Ihr müsst nicht die im Tutorial verwendeten Bezeichnungen der einzelnen ID's übernehmen, sondern könnt natürlich eure eigenen benutzen. Achtet dabei jedoch darauf, dass die ID's im HTML identisch zu denen im CSS sind!

Ich habe diesen Effekt in allen mir zur Verfügung stehenden Browsern getestet (u.a. IE6-aktuell, Firefox, Chrome, Opera) und alles funktioniert so, wie es soll.

So, dann legen wir mal los!

Schritt 1

Zuerst erstellen wir eine HTML-Datei mit folgendem Grundgerüst:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>100-%-Hintergrundbild</title>
</head>
<body>
</body>
</html>

Hierbei ist es wichtig, dass ihr einen standardkonformen Doctype verwendet! Ansonsten gibt es Probleme mit der Darstellung in älteren Browsern. In meinem Fall ist es XHTML 1.0 Transitional.

Eine Liste mit korrekten DTD's findet ihr auf http://www.w3.org/QA/2002/04/valid-dtd-list.html


 

Schritt 2

In den Body fügen wir nun folgende Zeilen Code ein:
<div><img src="wallpaper.jpg" id="background" /></div> <!-- Zeile 1 -->
<div id="content_wrapper"> <!-- Zeile 2 -->
<div id="content">  <!-- Zeile 3 -->
</div>
</div> 

Mit der ersten Zeile im Body definieren wir das Hintergrundbild. Wie man hier erkennt, ist das "Hintergrundbild" kein echtes Hintergrundbild, sondern eine normale Grafik, die in einen div-Bereich eingebunden ist. Dadurch ist es möglich, das Bild zu skalieren.

Mit <img src="" /> wird das Bild geladen. Ihr könnt dabei jedes Bild verwenden, das ihr wollt. Achtet darauf, dass die Pfadangabe korrekt ist.

Die zweite Zeile dient dazu, den Inhalt vom Hintergrund abzuheben.

Die dritte Zeile ist euer eigentlicher Inhalt, in den später eure Website kommt. Diesen Bereich könnt ihr individuell bearbeiten. In diesem Fall ist es ein einfacher Wrapper.

Euer Quelltext sollte nun wie folgt aussehen:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>100-%-Hintergrundbild</title>
</head>
<body>
<div><img src="wallpaper.jpg" id="background" /></div> <!-- Zeile 1 -->
   <div id="content_wrapper"> <!-- Zeile 2 -->
 <div id="content">  <!-- Zeile 3 -->
 </div>
   </div> 
</body>
</html>

 

Schritt 3

Nun geht es weiter mit ein bisschen CSS. Ich verzichte für dieses Beispiel auf eine externe CSS-Datei und füge den Code in den Head.

Dazu definieren wir im Head einen Bereich für CSS, indem wir <style type="text/css"></style> einfügen.

Euer Quelltext sollte nun wie folgt aussehen:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>100-%-Hintergrundbild</title>
<style type="text/css">

</style>
</head>
<body>
<div><img src="wallpaper.jpg" id="background" /></div> <!-- Zeile 1 -->
   <div id="content_wrapper"> <!-- Zeile 2 -->
 <div id="content">  <!-- Zeile 3 -->
 </div>
   </div> 
</body>
</html> 

Schritt 4

In den eben erstellten Bereich fügen wir folgende Zeilen Code ein:
html, body {margin:0; padding:0; width:100%; height:100%; overflow:hidden;}
#background{position:absolute;  width:100%; height:100%; z-index:1;}
#content_wrapper{position:absolute; width:100%; height:100%; top:0; left:0; overflow:auto; z-index:2;}
#content{width:960px; height:500px; margin: 0 auto; border:1px solid #ccc; }

Zuerst weisen wir html UND body eine Breite und Höhe von 100% zu. Zusätzlich setzen wir den Außen- und Innenabstand auf 0. Des Weiteren fügen wir ein overflow:hidden hinzu.

Die zweite Zeile ist für das Hintergrundbild. Da es in einem Div liegt, können wir dem Bild eine Breite und Höhe von 100% zuordnen. Des Weiteren bekommt es eine absolute Positionierung sowie einen z-index von 1. Dieser z-index bewirkt, dass das Bild an unterster Stelle steht.

Die dritte Zeile dient dazu, den Inhalt vom Hintergrund abzuheben. Daher bekommt auch diese Ebene eine absolute Positionierung und einen z-index von 2. Damit liegt diese Ebene über der Hintergrundebene. Zusätzlich weisen wir eine Breite und Höhe von 100% hinzu, damit sich diese Ebene über die gesamte Seite erstreckt sowie ein top:0 und left:0, um es am Rand zu positionieren.

Die letzte Zeile ist die eigentliche Website. In diesem Fall ist es ein einfacher, 960px breiter Wrapper mit einem margin:0 auto; und einem Rahmen, um ihn zu erkennen. Ihr könnt natürlich eure eigenen Werte nehmen.

Euer Quelltext sollte jetzt wie folgt aussehen:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>100-%-Hintergrundbild</title>
<style type="text/css">
html, body {margin:0; padding:0; width:100%; height:100%; overflow:hidden;}
#background{position:absolute;  width:100%; height:100%;z-index:1;}
#content_wrapper{position:absolute; width:100%; height:100%; top:0; left:0; overflow:auto; z-index:2;}
#content {width:960px; height:700px; margin:0 auto; border:1px solid #ccc;}
</style>
</head>
<body>
<div><img src="wallpaper.jpg" id="background" /></div> <!-- Zeile 1 -->
   <div id="content_wrapper"> <!-- Zeile 2 -->
 <div id="content">  <!-- Zeile 3 -->
 </div>
   </div> 
</body>
</html>

Schritt 5

Öffnet jetzt die HTML-Datei mit einem Browser. Wenn ihr nun die Größe des Browserfensters verändert, sollte sich das Hintergrundbild automatisch an die Größe des Browserfensters anpassen.

Ich hoffe, dass euch dieses Tutorial gefallen hat und ihr das Gezeigte für euch nutzen könnt.



DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von waternimfchen
  • 14.05.2013 - 21:05

merci, genau was ich gesucht habe

Portrait von ledavi
  • 12.02.2013 - 20:04

Danke für das Tutorial. Kann ich so in dieser Form sicher bei einem nächsten Projekt gebrauchen.

Portrait von toxicteri
  • 09.02.2013 - 13:55

Ein schönes Tutorial, aber leider nutzlos, da das Problem mit dem verzerren bleibt :/

Portrait von Anina
  • 13.11.2012 - 09:40

Wow - genau das habe ich gesucht! Danke schön!
... und super gut beschrieben ist es auch!

Portrait von DaKKK
  • 13.11.2012 - 10:14

Gern geschehen :-) Freut mich, dass es dir gefällt!

Portrait von vtech
  • 25.10.2012 - 08:58

Super Danke, genau das habe ich schon länger gesucht, aber nie zeit gehabt mir das zu überlegen

Portrait von Lillith
  • 12.10.2012 - 08:32

Daran bin ich nach monatelangen Versuchen kläglich gescheitert und hab letztlich frustriert aufgegeben.
Ich hab es zwar noch nicht getestet, aber DAAAAANKE! für das Tut! :)

Portrait von Niobe
  • 08.10.2012 - 13:48

Danke für das Tut... ich habe es zum Testen ausprobiert (CS4), funktioniert, Browser FF passt sich entsprechend an. Allerdings habe ich das gleiche Problem mit dem Stauchen und verzerren.

Deshalb habe ich den Vorschlag von Alarna, den Code in die CSS eingeben ebenfalls ausprobiert. Da ich jedoch unterschiedliche Hintergrund Bilder (in den verschiedenen Seiten) haben möchte, ist dies für mein Vorhaben nicht die richtige Lösung, sondern den Eintrag direkt in der Index zu platzieren mit dem Befehl: background-size: cover... ich hoffe ich bekomme das hin.

Danke für die Tipps, die von einem non-professionell gerne angenommen werden... ich werde mich weiter durchbeissen.


Portrait von cPpdks
  • 07.10.2012 - 15:16

Ich bin gespannt wie es funktionieren wird.

Portrait von gabphoto
  • 06.10.2012 - 17:14

Vielen Dank für das interessante Tutorial.

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 05.10.2012 - 18:09

An sich ganz interessant, bloß das Bild wird gestaucht/verzerrt. Das macht es bei unterschiedlichen Auflösungen sehr problematisch. Also ich würde da immer wieder eher zu Javascript greifen ... Aber wirklich ein schönes Tutorial.

Portrait von mapegele
  • 05.10.2012 - 14:16

Verständlich erklärt und bestimmt für viele interessant. Danke für die Arbeit.

Portrait von isat
  • 05.10.2012 - 12:54

background-size: cover; ist eine CSS3-Lösung für das Problem. Vorteil: das Seitenverhältnis des Hintergrundbildes wird beibehalten. So hab ich die Infos unter diesem link zumindest verstanden: http://www.css3.info/preview/background-size/

Nachteil ist natürlich wie bei allen CSS3-Auszeichnungen der Browser-Support

Portrait von Alarna
  • 05.10.2012 - 18:42

Das hab ich befürchtet :(

Danke für die Anleitung, das kann ich dann für die alten Browser brauchen :)

Portrait von Alarna
  • 05.10.2012 - 12:20

Ich habe gerade ein Layout erstellt mit derselben Absicht und im Netz folgende CSS Funktion gefunden:

html, body{
width: 100%;
min-height: 100%;
background:url(../images/background.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Das in die CSS Datei, ohne dass man in der index irgendwas einfügen muss.

Ich hab allerdings keinen Schimmer, ob das mit alten Browsern funktioniert.

Kannst Du dazu etwas sagen?

Portrait von DaKKK
  • 08.10.2012 - 23:49

Das Problem bei "background-size:cover" ist, dass das ein CSS3-Befehl ist und somit nur von Browsern unterstützt wird, die CSS3 können. Meine Variante hingegen funktioniert auch auf Browsern, die das nicht verstehen.

Portrait von johanna52
  • 05.10.2012 - 12:04

danke für das sehr gute und interessante Tut

Portrait von AnneRick
  • 05.10.2012 - 12:01

Vielen Dank fur das Tutorial.

Anne

Portrait von MaoMao
  • 05.10.2012 - 11:52

Kann mich nur B00mer anschliessen. Danke viel mal.

Portrait von B00mer
  • 05.10.2012 - 11:42

Danke! Genau daran habe ich mir mal die Zähne ausgebissen. :-)

x
×
×