CSS (+JS?): Hintergrundbild
- Xin
- nur zu Besuch hier
- Beiträge: 8862
- Registriert: Fr Jul 04, 2008 11:10 pm
- Wohnort: /home/xin
- Kontaktdaten:
CSS (+JS?): Hintergrundbild
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.
Wie bekomme ich das hin?
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.
Wie bekomme ich das hin?
Du hast keine ausreichende Berechtigung, um die Dateianhänge dieses Beitrags anzusehen.
Merke: Wer Ordnung hellt ist nicht zwangsläufig eine Leuchte.
Ich beantworte keine generellen Programmierfragen per PN oder Mail. Dafür ist das Forum da.
Ich beantworte keine generellen Programmierfragen per PN oder Mail. Dafür ist das Forum da.
-
- Beiträge: 236
- Registriert: Do Feb 10, 2011 6:31 pm
Re: CSS (+JS?): Hintergrundbild
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
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
- nur zu Besuch hier
- Beiträge: 8862
- Registriert: Fr Jul 04, 2008 11:10 pm
- Wohnort: /home/xin
- Kontaktdaten:
Re: CSS (+JS?): Hintergrundbild
Sorry, das ist ein Mißverständnis.nouseforname hat geschrieben: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.
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.
Merke: Wer Ordnung hellt ist nicht zwangsläufig eine Leuchte.
Ich beantworte keine generellen Programmierfragen per PN oder Mail. Dafür ist das Forum da.
Ich beantworte keine generellen Programmierfragen per PN oder Mail. Dafür ist das Forum da.
-
- Beiträge: 236
- Registriert: Do Feb 10, 2011 6:31 pm
Re: CSS (+JS?): Hintergrundbild
Nuja, funzt auch, ich habe das Bild mal zur veranschaulichung geändert.
- Xin
- nur zu Besuch hier
- Beiträge: 8862
- Registriert: Fr Jul 04, 2008 11:10 pm
- Wohnort: /home/xin
- Kontaktdaten:
Re: CSS (+JS?): Hintergrundbild
?
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.
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.
Merke: Wer Ordnung hellt ist nicht zwangsläufig eine Leuchte.
Ich beantworte keine generellen Programmierfragen per PN oder Mail. Dafür ist das Forum da.
Ich beantworte keine generellen Programmierfragen per PN oder Mail. Dafür ist das Forum da.
-
- Beiträge: 236
- Registriert: Do Feb 10, 2011 6:31 pm
Re: CSS (+JS?): Hintergrundbild
Der erste Link.^^
http://nouseforname.de/bg.php
Weiisser Rahmen = eine Grafik. Kann sein dass die Proportionen nun nicht ganz stimmen.
http://nouseforname.de/bg.php
Weiisser Rahmen = eine Grafik. Kann sein dass die Proportionen nun nicht ganz stimmen.
Re: CSS (+JS?): Hintergrundbild
Was du suchst, ist die CSS3 Eigenschaft background-size mit dem Wert cover.
Die letzten beiden Zeilen sind ein Workaround für ältere IE-Versionen, die Darstellung kann daher im IE ggf. etwas abweichen.
Beispiel:‘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.
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')";
}
-
- Beiträge: 236
- Registriert: Do Feb 10, 2011 6:31 pm
Re: CSS (+JS?): Hintergrundbild
Weiss garnicht was ihr habt, meine Lösung funzt doch... und das ganz ohne die Fixes für die diversen Browser...
- Xin
- nur zu Besuch hier
- Beiträge: 8862
- Registriert: Fr Jul 04, 2008 11:10 pm
- Wohnort: /home/xin
- Kontaktdaten:
Re: CSS (+JS?): Hintergrundbild
Leider nicht.nouseforname hat geschrieben:Weiss garnicht was ihr habt, meine Lösung funzt doch... und das ganz ohne die Fixes für die diversen Browser...
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.
Merke: Wer Ordnung hellt ist nicht zwangsläufig eine Leuchte.
Ich beantworte keine generellen Programmierfragen per PN oder Mail. Dafür ist das Forum da.
Ich beantworte keine generellen Programmierfragen per PN oder Mail. Dafür ist das Forum da.