nicht angemeldet
Bild auf div-Höhe skalieren?
0 0 0 
Auge
0 0
Bild auf div-Höhe skalieren?
Hi all,
Nach mehreren Stunden vergeblicher Bemühungen und Suche in Google und diesem Forum möchte ich nun um Hilfe bitten:
Mein Problem ist leicht erklärt (aber schwierig zu lösen):
Ich suche nach einer Möglichkeit, ein beim Scrollen unbewegliches (Hintergrund)Bild anzuzeigen, allerdings auf die Bildschirmhöhe skaliert, wobei aber oberhalb des Bildes exakt 100 Pixel frei bleiben müssen (für eine Kopfleiste). Unten soll das Bild mit dem Viewport abschließen.
Nocheinmal langsam zum Mitschreiben: Die obersten 100 Pixel des Viewports sollen also frei bleiben, darunter soll das Bild beginnen und bis zur unteren Kante des Viewports reichen.
Ich steh hier völlig an. Die "height" eines Bildes ist anscheinend relativ zum Browserfenster anstatt zum umgebenden div; der IE interpretiert die Angaben "top:100px" und "bottom:0px" nicht gemeinsam; nicht einmal mit einer klassischen Tabelle scheints zu klappen...
Kann mir hierbei irgendjemand behilflich sein?
Bitte?
Vielen Dank im voraus,
marcus
-
Hintergrundbilder lassen sich mit dem aktuell gägngigem CSS nicht skalieren. Sie sind so groß wie sie sind.
-
Hintergrundbilder lassen sich mit dem aktuell gägngigem CSS nicht skalieren. Sie sind so groß wie sie sind.
Muß kein Hintergrundbild sein. Ich wäre schon glücklich, wenn ich überhaupt irgendwie ein Bild auf diese Art skalieren könnte. Den Text könnte ich dann ja in einem eigenen div drüberlegen.
Inzwischen ist mir auch fast schon jede Methode recht (außer Scripting).-
Hallo
Ich wäre schon glücklich, wenn ich überhaupt irgendwie ein Bild auf diese Art skalieren könnte. Den Text könnte ich dann ja in einem eigenen div drüberlegen.
Inzwischen ist mir auch fast schon jede Methode recht (außer Scripting).Du wirst um Scripting nicht herumkommen, da du weder mit HTML noch mit CSS rechnen kannst. Du könntest z.B. dein Bild per HTML einfügen und mit z-index in den Hintergrund verschieben. Damit wäre es möglich, Breite und Höhe des Bildes selbst zu bestimmen und einen Margin von 100px für die obere Kante anzugeben. Wieviel allerdings "Viewport - 100px" sind, kannst du nur mit einer clientseitigen Programmiersprache, im Normalfall JavaScript, ermitteln und als CSS-Regel auf das Bild anwenden.
Wem, als Besucher der Seite, kein JavaScript zur Verfügung steht, hat von dieser Konstruktion allerdings nichts.
Tschö, Auge
--
Die Musik drückt aus, was nicht gesagt werden kann und worüber es unmöglich ist zu schweigen.
(Victor Hugo)
Veranstaltungsdatenbank Vdb 0.1
-
-
-
Hey,
du brauchst noch einen Javascripthandler, der bei Größenanderungen des Viewports die Höhe des gestrecktes Bilds neu berechnet und setzt, nämlich auf 100% minus 100px.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> [code lang=css] h1 { position: fixed; top: 0; } #stretch { position: fixed; top: 100px; width: 100%; height: 100%; } #stretch img { width: 100%; height: 100%; }</style>
</head>
<body>
<h1>Lorem ipsum</h1>
<div id="stretch"><img src="bg.png" /></div>
</body>
</html>
[/code]--
水－金－地－火－木－土－天－海－冥 -
Hi,
Nur für den Fall, daß sich jemand (außer mir) für dieses Problem interessiert, möchte ich die Lösung beschreiben, die ich gefunden habe. Sie kommt gänzlich ohne Scripting aus und verwendet lediglich einen CSS Hack, um dem Internet Explorer anderen Code zuzuführen:
Die CSS-Datei enthält folgende Angaben:
/* code version for standard compliant browsers (e.g. Mozilla) */
#container {
position: absolute;
top: 100px;
bottom: 0px;
}#container img.background {
height: 100%;
}/* additional code only for IE; *html-hack rules out other browsers */
* html #container {
top: 0px;
height: 100%;
overflow: hidden;
}* html #container img.background {
border-top: 100px solid #FFFFFF;
}Die HTML-Datei enthält dann ganz einfach folgendes:
<div id="container">
<img class="background" src="backgroundpic.gif">
</div>Das heißt, ich verwende das falsche Box-Model des IE, um seine falsche Handhabung der kombinierten top/bottom-Angabe zu umschiffen: Ich definiere einfach einen border-top in der selben Höhe wie die gewünschte Kopfleiste (die eigentliche Kopfleiste lege ich dann mittels z-order drüber). Da der IE den border zur height hinzurechnet, ergibt die Angabe "height: 100%;" den gewünschten Effekt.
Unklar ist mir bloß noch, ob das nun bei allen relevanten Browsern funktioniert... kann mir dazu jemand näheres sagen?