nicht angemeldet
background-image strecken?
Hallo, ich hab da mal eine frage.
und zwar: wie kann man es einstellen das das background-image wenn es zu klein für den ganzen Bildschirm ist anstatt es zu wiederholen einfach das Bild streckt?
d.h. ich mache ein Bild als Hintergrund mit background-image, das nur 1000pixel groß ist mein Bildschirm ist aber größer. jetzt will ich nicht das es einfach nochmal halb dargestellt wird sondern das er es auf die maximale breite verbreitert wird.
Hoffen auf baldige Antwort und mfG
-
Hallo,
und zwar: wie kann man es einstellen das das background-image wenn es zu klein für den ganzen Bildschirm ist anstatt es zu wiederholen einfach das Bild streckt?
Das wird erst mit CSS 3 gehen.
d.h. ich mache ein Bild als Hintergrund mit background-image, das nur 1000pixel groß ist mein Bildschirm ist aber größer. jetzt will ich nicht das es einfach nochmal halb dargestellt wird sondern das er es auf die maximale breite verbreitert wird.
Die einzige Möglichkeit, die wohl noch machbar wäre, wäre das Bild in ein normales img-Element einzubinden, dieses img-Element mit Javascript so zu manipulieren, dass es dynamisch die Breite (und Höhe?) des Viewport einnimmt und eventuell absolut positioniert ist. Der gesamten Inhalt der Seite bekäme dann einen höheren z-index und läge über diesem Bild-Element.
Allerdings würde ich davon abraten; nur weil etwas eventuell machbar wäre, muss es noch nicht sinnvoll sein. Gerade ein Bild mit 1000 Pixel Höhe (und vermutlich entsprechender Breite) wiegt einiges an Kilobytes und macht dadurch für Leute mit langsameren Verbindungen das Laden der Seite zur Qual. Dazu kommt, dass gestreckte Bilder oft sehr gestresst aussehen, nicht mehr schön.
Ich würde es lassen und mir eher überlegen, wie ich das Bild so hinkriege, dass es definierten Raum einnimmt (zentriert oder so) und wie man den Restraum möglichst gut füllt, dass es auch bei verschiedenen Browserfenstergrößen annehmbar aussieht.
Tim
-
d.h. ich mache ein Bild als Hintergrund mit background-image, das nur 1000pixel groß ist mein Bildschirm ist aber größer. jetzt will ich nicht das es einfach nochmal halb dargestellt wird sondern das er es auf die maximale breite verbreitert wird.
Die einzige Möglichkeit, die wohl noch machbar wäre, wäre das Bild in ein normales img-Element einzubinden, dieses img-Element mit Javascript so zu manipulieren, dass es dynamisch die Breite (und Höhe?) des Viewport einnimmt und eventuell absolut positioniert ist. Der gesamten Inhalt der Seite bekäme dann einen höheren z-index und läge über diesem Bild-Element.
dann schade, das kommt nicht in frage weil es für eine externe seite is, personalskin unso ^^
danke-
<img src="Bildpfad/Bild.ext" style="position:absolute;z-index:0;width:100%;height:100%;left:0;top:0">
So ungefähr würde ich es machen, aber wie Tim schon sagte, es ist an sich äußerst ungünstig, da abhängig von der Fenstergröße das Bild mal mehr, mal weniger schön aussehen würde.
MfG, Jannis
-
ok , danke an euch beide...
Jetz hab ich das bild größer gemacht...jetz wird es aber wenn man ne kleine auflösung hat zerschnippselt
^^
kann man das ändern? also quasi sowas wie autoresize...
gibt es sowas?
-
-
-