Dynamisches Hintegrundbild für website

[atzeton]

Hallo an Alle,

ich bin gerade dabei eine Website zu erstellen, bei der ich einen Hintergrund einsetzen möchte, bei dem die rechte Hälfte schwarz und die linke Hälfte rot ist. Soweit so gut.

Die Hälften sollen immer jeweils 50 % des Browsers ausfüllen (50% schwarz, 50% rot), auch wenn ich das Browserfenster verkleinere oder vergrößere.

Das Hintergrundbild kann problemlos verzerrt werden. Es muss nur immer die volle Breite ausfüllen und die Trennung schwarz/rot genau in der Mitte des Fensters verlaufen.

Wäre super wenn mir jemand ein Tipp gibt, wie ich dies am besten umsetzen kann.
Zu meinen Kenntnissen: leider nur HTML und CSS.

Ich danke euch schon im Voraus für die Mühe.

MfG - atzeton

[suit]

Das Hintergrundbild kann problemlos verzerrt werden. Es muss nur immer die volle Breite ausfüllen und die Trennung schwarz/rot genau in der Mitte des Fensters verlaufen.

Das geht auch ohne Hintergrundbild, wenn es nur um zwei farben geht.

Ein Element mit 50 % Breite hinter die anderen Elemente positioniert mit entsprechender Farbe - body oder html bekommen die andere Farbe.

[Eliara_]

hei,

http://gut.lv/beispiel/bgbody.html

Das ist beispiel was suit sagt, nur der positionierte block geht nicht bis zu bottom.

< http://www.findloves.com/logon.html>

vllt dieses Beispiel hilft dir weiter.

LG

[Eliara_]

und

noch wollte ich sagen, mit der table waere es sehr einfach :>

LG

[Gunnar Bittersmann]

@@suit:

nuqneH

Das Hintergrundbild kann problemlos verzerrt werden. Es muss nur immer die volle Breite ausfüllen und die Trennung schwarz/rot genau in der Mitte des Fensters verlaufen.

Das geht auch ohne Hintergrundbild, wenn es nur um zwei farben geht.

Richtig. (Außer in rückschrittlichen Browsern wie IE und Opera.)

Ein Element mit 50 % Breite hinter die anderen Elemente positioniert mit entsprechender Farbe - body oder html bekommen die andere Farbe.

Aber doch nicht so! Ein zusätzliches Element?? Nein danke!

Sondern:

body  
{  
  background: url(red-black.png) repeat-y center;  
  background: -moz-linear-gradient(left, red, red 50%, black 50%, black);  
  background: -webkit-gradient(linear, left center, right center, from(red), color-stop(50%, red), color-stop(50%, black), to(black));  
}

Browser, die immer noch keine Gradienten kennen, bekommen ein hinreichend breites Hinterrgrundbild mittig positioniert.

Browser, die dieses nicht nötig haben, fordern dieses auch nicht an; es wird nicht unnützerweise übertragen.

Qapla'

[suit]

Browser, die dieses nicht nötig haben, fordern dieses auch nicht an; es wird nicht unnützerweise übertragen.

Dafür hast du aber einen massiven Einsatz an CSS - das müsste man schon fast ausrechen, was mehr verbraucht: die Bildinformationen für ein 1x4096 Pixel großes 2-Farben-Bild oder die CSS-Wurst, wenn es doch komplizierter werden sollte :)

[apsel]

Om nah hoo pez nyeetz, Gunnar Bittersmann!

Browser, die immer noch keine Gradienten kennen, bekommen ein hinreichend breites Hinterrgrundbild mittig positioniert.

Browser, die dieses nicht nötig haben, fordern dieses auch nicht an; es wird nicht unnützerweise übertragen.

Aufgrund welchen Mechanismus' passiert das?

Matthias

[suit]

Aufgrund welchen Mechanismus' passiert das?

Auf CSS und der Hoffnung, dass die Browser vernünftig programmiert sind.

html {
  background: url(foo.png):
  background: url(bar.png):
}

Die erneute Deklaration der Background-Eigenschaft überschreibt die bereits bestehende, es besteht keine notwendigkeit, foo.png anzufordern.

[apsel]

Om nah hoo pez nyeetz, suit!

Das würde aber bedeuten:

1. Der Browser bekommt eine Anweisung.
2. Der Browser ignoriert die Anweisung und schaut, ob es noch eine andere gibt, die die erste möglicherweise überschreibt.
3. Der Browser führt doch die erste aus, wenn es keine andere gibt.

oder aber das komplette CSS wird zuerst geparst, was auch nicht unbedingt sinnvoll ist, wenn es im CSS Regeln gibt, die für diese konkrete Datei nicht zutreffen.

Matthias

[Der Martin]

Hallo,

ich habe keine Ahnung, wie die "Großen" das tatsächlich machen. Wenn ich aber einen Browser entwickeln müsste, würde ich (vereinfacht)

1. erst aus dem HTML das DOM aufbauen
 2. und dann die Stylesheets parsen und auf das vorbereitete DOM anwenden
 3. und zum Schluss die daraus resultierende Darstellung rendern

Da ich in Schritt 2 ohnehin damit rechnen muss, dass mehrere Selektoren auf ein Element zutreffen und dieselbe Eigenschaft im Verlauf des Parsens verschiedene Werte bekommt, hat sich damit in Schritt 3 auch das Laden von Ressourcen für Hintergrundbilder erledigt, die am Ende gar nicht wirksam werden.

oder aber das komplette CSS wird zuerst geparst, was auch nicht unbedingt sinnvoll ist, wenn es im CSS Regeln gibt, die für diese konkrete Datei nicht zutreffen.

Das weiß man aber erst *nach* dem Parsen der Stylesheets. :-)

Ciao,
 Martin

[Gunnar Bittersmann]

@@apsel:

nuqneH

Om nah hoo pez nyeetz, Gunnar Bittersmann!

Browser, die immer noch keine Gradienten kennen, bekommen ein hinreichend breites Hinterrgrundbild mittig positioniert.

Browser, die dieses nicht nötig haben, fordern dieses auch nicht an; es wird nicht unnützerweise übertragen.

Aufgrund welchen Mechanismus' passiert das?

Der Broser liest die ganze Regel. Zuerst also die Deklaration 'background: url(red-black.png)  repeat-y center'.

Dann die Deklaration 'background: -moz-linear-gradient(…)'. Für IE, Opera, Webkits, alle anderen Nicht-Mozillas und auch alle älteren Mozillas, die '-moz-linear-gradient' noch nicht kennen, stellt dies einen ungültigen Wert dar; sie ignorieren diese Deklaration.

In neueren Mozillas (Firefox ab 3.6, IIRC) hingegen überschreibt die Deklaration die vorige. Bevor der Browser dazu kommt, das Bild anzufordern, hat er schon längst wieder vergessen, dass er das je tun sollte.

Dann kommt noch 'background: -webkit-gradient(…)'. Was dies in neuen Webkits vs. alten Webkits und Nicht-Webkits anstellt, überlass ich deiner Phantasie. ;-)

Qapla'

[apsel]

Om nah hoo pez nyeetz, Gunnar Bittersmann!

In neueren Mozillas (Firefox ab 3.6, IIRC) hingegen überschreibt die Deklaration die vorige.

Das ist schon klar.

Bevor der Browser dazu kommt, das Bild anzufordern, hat er schon längst wieder vergessen, dass er das je tun sollte.

Sicher? Martins Herangehensweise scheint sinnvoll. Hier weiß der Browser zu keinem Zeitpunkt, dass das Bild benötigt wird.

Matthias

[atzeton]

Gibt es keinen Befehl, der das Bild einfach auf die volle breite zerrt?
Z.B. ich leg das Bild mit 800x600 an und lass es per befahl auf jede beliegige breite ziehen.

Es muss ein Bild sein, da es einen Verlauf enthält.

Danke aber trotzdem an die bisherigen Antworter

[Der Martin]

Hi,

Gibt es keinen Befehl, der das Bild einfach auf die volle breite zerrt?

weder in HTML noch in CSS gibt es Befehle.

Z.B. ich leg das Bild mit 800x600 an und lass es per befahl auf jede beliegige breite ziehen.

Ja, mit einem img-Element kannst du das problemlos tun. Mit CSS derzeit noch nicht (bzw. nur theoretisch, die Browser unterstützen es wohl noch nicht).

Es muss ein Bild sein, da es einen Verlauf enthält.

Ach? In deinem Eröffnungsposting hast du geschrieben:

[...] einen Hintergrund einsetzen möchte, bei dem die rechte Hälfte schwarz und die linke Hälfte rot ist.
Die Hälften sollen immer jeweils 50 % des Browsers ausfüllen (50% schwarz, 50% rot)

Das heißt für mich: In der Bildmitte eine Schwarz-Rot-Kante. Kein Verlauf.

Ciao,
 Martin

[Gunnar Bittersmann]

@@atzeton:

nuqneH

Es muss ein Bild sein, da es einen Verlauf enthält.
Danke aber trotzdem an die bisherigen Antworter

Du bedankst dich für meine Antwort, ohne sie gelesen zu haben?

Ich sagte doch, dass moderne Browser für Verläufe KEINE Bilder benötigen.

Rot/schwarz bekommt 'html' als Hintergrund, den vertikalen Helligkeitsverlauf(?) bekommt 'body' als Hintergrund.

So würde es mit Grafiken auch in IE und Opera funktionieren. Browser, die Gradienten kennen, unterstützen aber auch schon multple Hintergrundbilder:

body  
{  
  background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.5), rgba(0, 0, 0, 0.5)), -moz-linear-gradient(left, red, red 50%, black 50%, black);  
  background: -webkit-gradient(linear, center top, center bottom, from(rgba(255, 255, 255, 0.5)), to(rgba(0, 0, 0, 0.5))), -webkit-gradient(linear, left center, right center, from(red), color-stop(50%, red), color-stop(50%, black), to(black));  
}

Qapla'