CSS (+JS?): Hintergrundbild

[Xin]

Hossa,

ich habe eine Frage bzgl. eines Hintergrundbildes, dass ich mit CSS formatieren möchte.

Folgendes ist das Problem: Ich möchte ein Hintergrundbild auf eine Website bringen. Dieses Bild ist X * Y Pixel groß. Innerhalb des Bildes ist ein Viereck (rot), den ich auf jeden Fall sehen möchte. Das bedeutet, wenn das Fenster kleiner wird als dieser Rahmen, dann soll das Hintergrundbild verhältnistreu kleiner werden.

Der Bereich außerhalb um das Viereck (orange) kann gezeigt werden - muss aber nicht. das ist quasi Füllmaterial. Wird die Auflösung allerdings so groß, dass das Füllmaterial nicht mehr reicht, soll das Bild verhältnistreu hochskaliert werden, so dass der Hintergrund immer vollständnig abgebildet wird.
Der schwarze Rand soll die Browser-Fenstergröße darstellen.

Das Viereck soll immer vollständig zu sehen sein, nur, wenn das Fenster einen Bereich aufspannt, der so flach ist, dass das Füllmaterial nicht mehr reichen würde, soll das Viereck beschnitten werden.

css.png

Wie bekomme ich das hin?

[nouseforname]

So?

http://nouseforname.de/bg.php


edit:
Das Bild sollte nur aus dem roten Bereich bestehen, Die Füllung passiert über den Hintergrund der Seite.
Sollte der Hintergrund ( die Füllung) nicht einfarbig sein, so machst Du ein Bild welches nur aus diesem besteht und setzt dieses Bild per CSS als HG über die Seite.

http://nouseforname.de/bg2.php

[Xin]

So?

Das Bild sollte nur aus dem roten Bereich bestehen, Die Füllung passiert über den Hintergrund der Seite.
Sollte der Hintergrund ( die Füllung) nicht einfarbig sein, so machst Du ein Bild welches nur aus diesem besteht und setzt dieses Bild per CSS als HG über die Seite.

Sorry, das ist ein Mißverständnis.

Das "Bild" ist das orange Feld in dem mittig ein rotes Rechteck enthalten ist. Dieses orange Feld mit rotem Rechteck ist das Hintergrundbild, also beispielsweise ein JPG. Der rote Bereich ist gewissermaßen der "interessante Teil" des Bildes, z.B. ein Flugzeug, im orangen Teil befindet sich der Himmel um das Flugzeug.
Das Flugzeug soll möglichst immer zu sehen sein, der Himmel darf an allen vier Seiten passend abgeschnitten werden.

Der rote Bereich soll nach Möglichkeit immer sichtbar sein, solange das orange Feld den kompletten Hintergrund abdecken kann. Nur wenn die Fenstermaße so breit bzw. so dünn werden, dass das orange Feld nicht mehr passend skaliert werden kann, soll aus dem roten Bereich ausgeschnitten werden.

[nouseforname]

Nuja, funzt auch, ich habe das Bild mal zur veranschaulichung geändert.

[Xin]

?

Das Rechteck in der Mitte und der Hintergrund sind ein und die selbe Grafik.
In Deinem Beispiel fliegt das Flugzeug (das Quadrat) durch den Himmel, das heißt es wären zwei Grafiken.

[nouseforname]

Der erste Link.^^
http://nouseforname.de/bg.php

Weiisser Rahmen = eine Grafik. Kann sein dass die Proportionen nun nicht ganz stimmen.

[bbbl]

Was du suchst, ist die CSS3 Eigenschaft background-size mit dem Wert cover.

‘cover’ – Scale the image, while preserving its intrinsic aspect ratio (if any), to the smallest size such that both its width and its height can completely cover the background positioning area.

Beispiel:

Code: Alles auswählen

body {
  background: url("bild.jpg") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  *filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=bild.jpg, sizingMethod='scale');
  -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=bild.jpg, sizingMethod='scale')";
}

Die letzten beiden Zeilen sind ein Workaround für ältere IE-Versionen, die Darstellung kann daher im IE ggf. etwas abweichen.

[nouseforname]

Weiss garnicht was ihr habt, meine Lösung funzt doch... und das ganz ohne die Fixes für die diversen Browser...

[Xin]

Weiss garnicht was ihr habt, meine Lösung funzt doch... und das ganz ohne die Fixes für die diversen Browser...

Leider nicht.

Erstens bleibt der Rechteck stehen, wenn ich das Fenster in eine andere Größe ziehe, zweitens hat der Orange Rahmen in der Grafik das ganze Bild verdecken und nicht durch einen orangen Hintergrund verlängert werden. Der Hintergrund darf nicht zu sehen sein.

Die Cover-Lösung werde ich mir später genauer ansehen. Prinzipiell könnte das durch aus in die richtige Richtung gehen, berücksichtigt aber natürlich nicht, dass ich ein Feld haben will, dass möglichst groß sichtbar bleiben soll, wenn das Fenster kleiner als das Bild wird.