Hintergrund am unteren Rand platzieren

no_n@me

no_n@me

Aktives Mitglied
Thread Starter
Dabei seit
20.03.2006
Beiträge
759
Reaktionspunkte
1
Hallo,

ich versuche gerade, ein Hintergrundbild am unteren Rand einer Website zu platzieren. Das Hintegrundbild soll sich horizontal wiederholen.
Klappt auch mit Safari und wohl auch mit neueren Versionen des IEs. Nur leider mit Firefox, Opera und Camino nicht. Da ist das Hintergrundbild nicht am unteren Rand der gesamten Seite, sondern am unteren Rand es Contents. Bei wenig Text, Bildern, was auch immer ist unten ein dicker weißer Rand zu sehen.

Hier mal Teile der CSS, der Rest hat eigentlich nichts damit zu tun:
HTML:
body {
  background-color: #ffffff;
  background-image: url(bg.jpg);
  background-repeat: repeat-x;
  background-position: bottom;
  font-size: 12px;
  font-family: Verdana, Arial, Helvetica, SunSans-Regular, Sans-Serif;
  color:#000000;  
  padding:0px;
  margin:0px;
}

#inhalt { 	
  margin: 1em auto;
  padding: 10px;
  width: 700px;
  background-color: #FAE4DE;
  border: 1px dotted #000000;
  text-align: justify;
}

HTML:
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Test</title>
<style type="text/css" media="screen">
  @import url("css/style.css");
</style>
</head>
<body>
<div id="inhalt">
<h1>Test-Seite</h1>
<p>Inhalt…</p>
<p>blablabla…</p>
</div>
</body>
</html>
 
Zur Veranschaulichung mal Bilder…

Wie es aussehen soll (was mit Safari auch klappt):


Wie es im Firefox aussieht:
 
Hab mal ein wenig rumgegoogled.
Füge mal beim body-css noch folgendes hinzu:
HTML:
background-attachment: fixed;

Safari & FF gehen, ich weiß allerdings jetzt nicht, wie die Windows-Welt
drauf reagiert.
 
Du hast auch die Möglichkeit mit Top und Left den Hintergrund zu schieben!
 
lea schrieb:
Hab mal ein wenig rumgegoogled.
Füge mal beim body-css noch folgendes hinzu:
HTML:
background-attachment: fixed;
Klasse, funktioniert! Die Windows-Welt werd ich mal befragen. Danke!

ThaHammer schrieb:
Du hast auch die Möglichkeit mit Top und Left den Hintergrund zu schieben!
Ja, nur wie schaffe ich es dann, daß er bei jeder Auflösung ganz unten ist?
 
Das könnte man per Javaskript lösen. Per JS kannst Du die Auflösung abfragen und den errechneten Wert dann übergeben.
 
Selbstverständlich funktioniert das nicht, da die Höhe des Bodys nicht das sichtbare Fenster ist sondern nur der Teil in dem andere Boxen positioniert sind. Du könntest mit verschiedenen CSS Hacks die Höhe auf 100% setzen, aber auch das bringt Probleme mit sich. Das Javascript Lösung ist absolut unsinnig, denn nur weil eine max. Höhe von beispielsweise 1280px vorliegt muss dies nicht bedeuten dass der Browser auch diese voll nutzt.

Das einzige was halbwegs funktioniert ist die Lösung über fixed, aber diese ist halt nicht sonderlich flexibel.
 
ThaHammer schrieb:
Das könnte man per Javaskript lösen. Per JS kannst Du die Auflösung abfragen und den errechneten Wert dann übergeben.
Ähm… Nee, danke. ;)

@ derFaktor:
Warum ist das mit dem fixed nicht sonderlich flexibel?
 
derFaktor schrieb:
Selbstverständlich funktioniert das nicht, da die Höhe des Bodys nicht das sichtbare Fenster ist sondern nur der Teil in dem andere Boxen positioniert sind. Du könntest mit verschiedenen CSS Hacks die Höhe auf 100% setzen, aber auch das bringt Probleme mit sich. Das Javascript Lösung ist absolut unsinnig, denn nur weil eine max. Höhe von beispielsweise 1280px vorliegt muss dies nicht bedeuten dass der Browser auch diese voll nutzt.

Das einzige was halbwegs funktioniert ist die Lösung über fixed, aber diese ist halt nicht sonderlich flexibel.
Und selbstverständlich könnte das doch funktionieren! Na ja vielleicht nicht auf den Pixel genau, da könnte es durchaus Probleme geben, aber mit Window.innerHeight z.B könnte man da schon hinkommen. ;) :p
Hm, sehe gerade das wahrscheinlich doch eher screen.availWidth! Na selber programmiert habe ich das noch nie, denke aber das es schon irgendwie funktionieren könnte! :)
 
Zurück
Oben Unten