hintergrundbild

[Jens Bischoff]

Hallo,

ich weiß, das strecken von Hintergrundbildern noch nicht geht.

Hier im Archiv habe ich aber diese möglickeit mit den Div gelesen.

<img src="./img/hintergrund.jpg" width="100%" height="100%">
<div style="position:absolute; top:0px; left:0px; z-index:2;">

Das geht auch soweit ganz gut.

Aber, das Hintergrundbild ist nur so groß, wie das Browserfenster. Wenn man eine kleine Auflösung hat und man dadurch scrollen muß, ist der Bereich wo man scrollen muß, ohne hintergund.

1. Gibt es eine möglichkeit, das er den ganzen Bildschirm ausfüllt?
2. Könnte das Bild mitrutschen, also das es immer den scrollen folgt?
3. könnte man eine Hintergrundfarbe "unter" das Bildlegen??

Danke euch. Tschü

Schönes Wochenende.

[WauWau]

Hallo Jens,

<img src="./img/hintergrund.jpg" width="100%" height="100%">

stellt ein bild in seiner vollen größe dar (100%).

<div style="position:absolute; top:0px; left:0px; z-index:2;">

Und positioniert ein <div>, anscheinend darüber. Was willst du damit erreichen? Einfacher wäre

<div style="...; background-image:url(/img/hintergrund.jpg);">

Aber, das Hintergrundbild ist nur so groß, wie das Browserfenster. Wenn man eine kleine Auflösung hat und man dadurch scrollen muß, ist der Bereich wo man scrollen muß, ohne hintergund.

jo. Kleine zwischenfrage: warum deine komplizierte Sache da oben mit dem drübergelegten <div>? Was soll das dir für einen Nutzen erweisen?

1. Gibt es eine möglichkeit, das er den ganzen Bildschirm ausfüllt?

Mache es einfach groß genug.

2. Könnte das Bild mitrutschen, also das es immer den scrollen folgt?

background-image: url(...);
background-position: fixed;

3. könnte man eine Hintergrundfarbe "unter" das Bildlegen??

background-image: url(...);
background-position:fixed;
background-color: grünrotgelbkariert;

Das mit dem grünrotgelkariert geht natürlich nicht mit grünrotgelbkariert, sondern mit einer Farbangabe heximedal, also von #000000 bis #FFFFFF, oder eine von Netscapes 256 Farbnamen (siehe SelfHTML).

Zu allem anderen, was background-... betrifft, siehe übrigens auch SelfHTML.

WauWau

[Jens Bischoff]

Abend,

<div style="position:absolute; top:0px; left:0px; z-index:2;">

Und positioniert ein <div>, anscheinend darüber. Was willst du damit erreichen?

Nun, der ganze spaß soll dazu führen, das das Hintergrundbild über die ganze Seite geht, egal welche auflösung man hat und das der Text über diesen Hintergrundbild liegt.

<div style="...; background-image:url(/img/hintergrund.jpg);">

Werde ich testen.

1. Gibt es eine möglichkeit, das er den ganzen Bildschirm ausfüllt?

Mache es einfach groß genug.

Ich kann aber das Bild nicht so groß genug machen. Was ist groß genug? Ich könnte es 2096 x 1586 oder so machen, aber dann wäre es immer so groß und man muß bei kleineren Auflösungen scrollen.

2. Könnte das Bild mitrutschen, also das es immer den scrollen folgt?

background-image: url(...);
background-position: fixed;

Das werde ich auch testen.

3. könnte man eine Hintergrundfarbe "unter" das Bildlegen??

background-image: url(...);
background-position:fixed;
background-color: grünrotgelbkariert;

Das wird auch getestet.

Das mit dem grünrotgelkariert geht natürlich nicht mit grünrotgelbkariert, sondern mit einer Farbangabe heximedal, also von #000000 bis #FFFFFF, oder eine von Netscapes 256 Farbnamen (siehe SelfHTML).

Das ist schon klar, so doof bin ich nun auch nicht.

Zu allem anderen, was background-... betrifft, siehe übrigens auch SelfHTML.

Das habe ich, aber nicht das richtige gefunden.

Nun gut dann danke ich dir erstmal und ich komme wieder.

Tschü

Schönes Wochenende

[WauWau]

Moin Jens,

Nun, der ganze spaß soll dazu führen, das das Hintergrundbild über die ganze Seite geht, egal welche auflösung man hat und das der Text über diesen Hintergrundbild liegt.

tja, da brauchst du wohl oder übel ein Bild, was eben groß genug ist ;-). Und ich würde auf jeden FAll zu dem CSS-background greifen, denn warum so umständlich?

Ich kann aber das Bild nicht so groß genug machen. Was ist groß genug? Ich könnte es 2096 x 1586 oder so machen, aber dann wäre es immer so groß und man muß bei kleineren Auflösungen scrollen.

Nur wenn du es über <img> einbindest, als background über CSS müsste niemand scrollen, denn es wird nur als Hintergrund für das betroffene Element angezeigt. Wenn du also sowas hast:

<div style="width: 200px; height: 300px; background-image: url(riesiges-bild.jpg);">Text</div>

und "riesiges-bild.jpg" 5000*5000 Pixel groß ist, wird nur ein Bereich von 200*300 Pixeln angezeigt. Nix scrollen also ;)

Das ist schon klar, so doof bin ich nun auch nicht.

So meinte ich das auch gar nicht. Scheinbar wusstest du nur nix von "background", und deswegen bin ich halt noch in einem Sätzchen auf die  Farbangaben in CSS eingegangen :)

Zu allem anderen, was background-... betrifft, siehe übrigens auch SelfHTML.
Das habe ich, aber nicht das richtige gefunden.

hmm... seltsam. Ach übrigens will der IE "background-position: fixed;" afaik nur beim <body>-element richtig interpretieren.

Nun gut dann danke ich dir erstmal und ich komme wieder.

genau ;-)

WauWau

[Jens Bischoff]

Grüße,

tja, da brauchst du wohl oder übel ein Bild, was eben groß genug ist ;-). Und ich würde auf jeden FAll zu dem CSS-background greifen, denn warum so umständlich?

Habe ich jetzt auch gemacht. :-)

<div style="width: 200px; height: 300px; background-image: url(riesiges-bild.jpg);">Text</div>

jetzt wird ja nur ein teil des Bildes angezeigt (abgeschnitten).
das geht auch nicht.

So meinte ich das auch gar nicht. Scheinbar wusstest du nur nix von "background", und deswegen bin ich halt noch in einem Sätzchen auf die  Farbangaben in CSS eingegangen :)

Hast ja recht, kannst ja nicht wissen, was ich weiß und was nicht :-))

Nun gut, da werde ich wohl oder übel das Bild rechts und unten mit der selben Farbe auslaufen lassen und die selbe farbe als hintergrundfarbe einbinden.

Danke. Tschü bis zum nächsten mal.