rasn: Vollflächiges Hintergrundbild

Beitrag lesen

SELF-Forum

Vollflächiges Hintergrundbild

rasn
– Informationen zu den Bewertungsregeln

Hallo,

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:

Beispiel

... 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 &amp; 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 &amp; 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 &amp; Tipps <a class="home" href="http://tutsandtipps.the-netbrain.de" title="Zurück zur Startseite von Tuts &amp; 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>&copy; 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!

Beitrag melden
–
Informationen zu den Bewertungsregeln