nicht angemeldet
Vollflächiges Hintergrundbild
0 0 0 1 
Gunnar Bittersmann
Vollflächiges Hintergrundbild
Matthias ApselHallo,
ich möchte gerne ein vollflächiges Hintergrundbild auf meiner Seite einbinden. Der Hintergrund sollte sich je nach Bildschirmgröße bzw. Auflösung anpassen d.h. skalierbar sein.
Hab im Netz folgende Beispielseite dafür gefunden:
... mit folgendem Quelltext bzw. Style-Sheet:
<!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" xml:lang="de" lang="de">
<head>
<title>Vollflächiges Hintergrundbild nur mit CSS</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="Diese Seite demonstriert, wie ein vollflächiges Hintergrundbild in eine Webseite nur mit CSS eingefügt wird." />
<meta name="keywords" content="fullpage background image, vollflächiges hintergrundbild, css, html" />
<link rel="stylesheet" type="text/css" href="../reset/reset.css" media="screen" />
<style type="text/css" media="screen">
/* ------------------- Die wichtigen Regeln für die Positionierung des Bildes ------------------------------- */
img.hintergrundbild {
min-height: 100%; /* Diese zwei Zeilen setzen die Regeln um den Hintergrund zu füllen */
min-width: 1024px;
width: 100%; /* Die Regeln, welche für die Skalierung sorgen */
height: auto;
position: fixed; /* Die Positionierung */
top: 0;
left: 0;
}
@media screen and (max-width: 1024px){
img.hintergrundbild {
left: 50%; /* Ohne diese Angaben funktioniert es nicht */
margin-left: -512px; }
}
div#inhalt {
position: relative; /* Diese Angabe ist extrem wichtig, da ansonsten der Inhalt nicht angezeigt wird! */
/* ---------------- ENDE WICHTIGER TEIL ------------ */
/* ------------------- Die ab hier unten folgenden Einträge sind nur für das Design der Seite nötig und nicht für die Funktionalität wichtig. ------------------------------- */
width: 700px;
margin: 0 auto;
margin-top: 20px;
background: url(body-bg.png) repeat;
padding: 20px;
font: 14px/1.6 Verdana, Helvetica, Arial, sans-serif;
color: #fff;
-moz-border-radius: 15px; /* -- diese beiden Regeln sind zwar nicht valide, da sie Browserspezifisch sind, */
-webkit-border-radius: 15px; /* sorgen aber für Runde Ecken im Firefox, Safari und Chrome --*/
}
body {
margin: 0;
padding: 0;
}
h1 {
font-size: 20px;
margin-bottom: 15px;
}
#header {
width: 100%;
height: 120px;
margin: 0;
background: transparent;
position: relative;
}
#logo-top { /* Bindet nur das Logo für die Tuts & Tipps Demoseiten ein */
width: 292px;
height: 100px;
overflow:hidden;
display:block;
background-image: url(demoheader.png);
background-repeat:no-repeat;
margin: 0 auto;
position: relative;
top: 10px;
}
a.logolink {
width: 292px;
height: 100px;
display: block;
}
a.home {
background: #fff;
padding: 2px;
}
</style>
</head>
<body>
<img id="background-img" class="hintergrundbild" src="fluss.jpg" alt="" /> <!-- Das eingebundene Hintergrundbild -->
<!-- Der Seitenkopfbereich -->
<div id="header">
<div id="logo-top"><a class="logolink" href="http://tutsandtipps.the-netbrain.de/" title="Zur Startseite von Tuts & Tipps"></a></div>
</div>
<!-- Der Inhalt der Seite folgt hier -->
<div id="inhalt">
<h1>Demoseite mit skalierbarem Hintergrundbild</h1>
<p>Dieses Hintergrundbild skaliert mit der Auflösung des Bildschirms wunderbar mit.</p>
<p>Probiert ruhig mal aus, was passiert, wenn Ihr Eurer Browserfenster verkleinert und vergrößert.</p>
<p>Zurück zur Homepage von Tuts & Tipps <a class="home" href="http://tutsandtipps.the-netbrain.de" title="Zurück zur Startseite von Tuts & Tipps">kommst Du hierlang</a>.</p>
<p>Es folgt noch etwas Blindtext zur besseren Demo..</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut,
</p>
<p>© Copyright Foto: <a class="home" href="http://www.hecht-eu.de" title="Zur Homepage des Fotorechte Inhabers">Hans Gerd Hecht</a>. Alle Rechte vorbehalten.</p>
</div>
</body> <!-- Special Thanks to Chris Coyier (http://css-tricks.com), von dem der Code im Original stammt. -->
</html>
Habe es nun versucht an meine Bedürfnisse anzupassen was mir jedoch nur bedingt gelingt. Das mit dem skalierbaren Hintergrund funktioniert. Da ich mich aber mit den Style-Sheets nicht auskenne und der Autor auch den anderen Inhalt mit den Style-Sheets formatiert hat wollte ich fragen ob es nicht möglich ist das Hintergrundbild mit CSS zu programmieren und den Rest wie gewohnt mit html???? d.h. mit Tabellen (table - tr - td usw.)
Bin für jede Hilfe dankbar!
-
Also ich weiß jetzt nicht wie du das meinst aber CSS und Style Sheets ist glaub ich das gleiche.Und ohne Style Sheets geht das ganze leider nicht.
-
Also ich weiß jetzt nicht wie du das meinst aber CSS und Style Sheets ist glaub ich das gleiche.Und ohne Style Sheets geht das ganze leider nicht.
Dass CSS und Style Sheet dasselbe ist ist mir schon klar und auch nicht das Problem. Wollte lediglich wissen ob es möglich ist NUR das Problem mit dem vollflächigen Hintergrund mit CSS zu lösen und den Rest normal mit html zu programmieren? (denn im Beispiel wurde auch der Rest mit CSS formatiert).
-
Wollte lediglich wissen ob es möglich ist NUR das Problem mit dem vollflächigen Hintergrund mit CSS zu lösen und den Rest normal mit html zu programmieren?
Vorweg: mit HTML programmiert man nicht, HTML ist eine Markup-Sprache (ML) deren Funktion es ist, die Bedeutung des Inhalts kennzuzeichnen.
Ein Vollflächiges Hintergrund mit CSS ist kein Problem - dir fehlt lediglich die Defintion was völlflächig bedeutet.
- Breite/Höhe auf 100% der Hintergrundfläche
- Proportional einschreiben
- Proportional umschreiben
- zentrieren
- an einer der Kanten ausgerichtet
- Wenn die Hintergrundfläche größer ist als das Bild, das Bild hochskalieren?
- Bzw wenn die Hintergrundfläche kleiner ist, das Bild runterskalieren?
CSS Backgrounds and Borders Module Level 3 mit Fokus auf background-size sollte deine erste Anlaufstelle sein.
Dann gilt es selbstverständlich noch zu klären, welche Browser du unterstützen willst/musst und wie die entsprechenden Fallback-Varianten auszusehen haben.
-
-
-
Hallo,
dein Beispiel ist ja recht wirre und zum Lernen nicht geeignet.
Das Prinzip ist einfach: Du stellst ein Bild auf die Seite, das 100% Höhe und 100% Breite der Seite hat. Das bedeutet, dass die Seitenverhältnisse unbestimmt sind. Aber bei einem Himmel mit Wolken fällt das nicht auf.
Dann musst du dafür sorgen, dass dieses Bild fixiert bleibt, auch wenn die Seite gescrollt wird. Sonst würde das Bild ja mitgescrollt und verschwindet.
#fix_body { position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: block; z-index: 1; } html>body #fix_body {position:fixed}<body> <div id='fix_body'> <img src='fotos/himmel.jpg' style='width:100%; height:100%' alt=Himmel> </div> <div style="z-index:2"> <!-- hier der HTML Code der Seite --> </div> </body>Durch das Attribut absolute (oder bei aktuellen Browsern fixed) geht es danach oben auf der Seite weiter. Es muss dafür gesorgt werden, dass die restliche Seite ncht unter dem Bild verschwindet, deshalb z-index:2 (höher als der des Bildes).
Gruß, Gast
-
Hallo,
dein Beispiel ist ja recht wirre und zum Lernen nicht geeignet.
Deins aber auch nicht unbedingt ...!
Und das aus mehreren Gründen:1. Ein Hintergrundbild gehört nicht zum eigentlichen Inhalt der Seite, sondern wird lediglich für die visuelle Ausgabe verwendet. Deshalb sollte man es grundsätzlich per CSS einbinden und nicht als Image-Element im HTML.
2. Braucht man nicht extra ein eigenes Element, sondern kann genauso gut dem Body-Element das Hintergrundbild zuweisen.
Das Prinzip ist einfach: Du stellst ein Bild auf die Seite, das 100% Höhe und 100% Breite der Seite hat. Das bedeutet, dass die Seitenverhältnisse unbestimmt sind. Aber bei einem Himmel mit Wolken fällt das nicht auf.
Dann musst du dafür sorgen, dass dieses Bild fixiert bleibt, auch wenn die Seite gescrollt wird. Sonst würde das Bild ja mitgescrollt und verschwindet.
Dafür gibt es die verschiedenen Background-Eigenschaften, die suit ja bereits in seiner Antwort verlinkt hat.
Gruß Gunther
-
Hallo,
- Ein Hintergrundbild gehört nicht zum eigentlichen Inhalt der Seite, sondern wird lediglich für die visuelle Ausgabe verwendet. Deshalb sollte man es grundsätzlich per CSS einbinden und nicht als Image-Element im HTML.
ich bin eine faule S.. und immer begierig, Codezeilen einzusparen. Aber jahrelang konnte man Hintergrundbilder nicht skalieren und nun - simsalabim - soll das jeder Browser können?
- Braucht man nicht extra ein eigenes Element, sondern kann genauso gut dem Body-Element das Hintergrundbild zuweisen.
Okay, mein Beispiel war aus dem Zusammenhang gerissen, das Himmel-Bild belegt die oberen 80% des Hintergrundes, unten ist das Meer als zweites Bild. Kann man einem Element (z.B. body) inzwischen mehrere Hintergrundbilder zuweisen?
Mal sehen, ob es noch klappt, wenn ich dem Bild z-index:-1 und dem Text kein z-index zuweise. Aus irgendeinem vergessenen Grund hatte meine Version mal Sinn.
Dafür gibt es die verschiedenen Background-Eigenschaften, die suit ja bereits in seiner Antwort verlinkt hat.
Gruß Gunther
-
Om nah hoo pez nyeetz, Gast!
Kann man einem Element (z.B. body) inzwischen mehrere Hintergrundbilder zuweisen?
Ja, und zwar ganz schön viele.
Matthias
--
1/z ist kein Blatt Papier.
-
-
@@Gast:
nuqneH
Dann musst du dafür sorgen, dass dieses Bild fixiert bleibt, auch wenn die Seite gescrollt wird. Sonst würde das Bild ja mitgescrollt und verschwindet.
Eben.
#fix_body {
position: absolute;Also was soll das denn?
html>body #fix_body {position:fixed}
Um es später zu korrigieren? Warum nicht gleich fixed?
BTW, das <div id='fix_body'> um das img-Element ist überflüssig (je nach DOCTYPE).
z-index: 1;
Auch unsinnig. Das Ding soll in den HINTERgrund. z-index: -1
<div style="z-index:2">
Dann ist auch der z-Index für den Inhalt überflüssig.
Zumal Inline-Style-Angaben sowieso nichts im HTML-Dokument zu suchen haben.
Qapla'
--
„Perfektion ist nicht dann erreicht, wenn es nichts mehr hinzuzufügen gibt, sondern wenn man nichts mehr weglassen kann.“ (Antoine de Saint-Exupéry)
-