Dehnen und Skalieren eines CSS-Bildes im Hintergrund - nur mit CSS

Ich möchte, dass sich mein Hintergrundbild je nach Größe des Browserfensters ausdehnt und skaliert.

Ich habe einige Fragen auf Stack Overflow gesehen, die die Aufgabe erledigen, wie zum Beispiel Stretch and scale CSS background. Es funktioniert gut, aber ich möchte das Bild mit background platzieren, nicht mit einem img Tag.

In diesem wird ein img-Tag platziert, und dann wird mit CSS dem img-Tag Tribut gezollt.

width:100%; height:100%;

Es funktioniert, aber diese Frage ist ein bisschen alt, und besagt, dass in CSS 3 die Größenänderung eines Hintergrundbildes ziemlich gut funktionieren wird. Ich'habe dies versucht Beispiel das erste, aber es hat'nicht funktioniert für mich.

Gibt es eine gute Methode, um es mit der background-image Erklärung zu tun?

Community
Bearbeitete Frage 23. Mai 2017 в 12:26
Programmierung
background css
19. Juli 2009 в 3:51
21 Aufrufe

Mit dem von mir erwähnten Code...

HTML

<div id="background">

</div>

CSS

#background {
    width: 100%; 
    height: 100%; 
    position: fixed; 
    left: 0px; 
    top: 0px; 
    z-index: -1; /* Ensure div tag stays behind content; -999 might work, too. */
}

.stretch {
    width:100%;
    height:100%;
}

Dies hat den gewünschten Effekt: nur der Inhalt wird gescrollt, nicht der Hintergrund.

Das Hintergrundbild passt sich der Größe des Browserfensters an, unabhängig von der Bildschirmgröße. Wenn der Inhalt nicht in das Browserfenster passt und der Benutzer die Seite scrollen muss, bleibt das Hintergrundbild im Fenster fixiert, während der Inhalt gescrollt wird.

Mit CSS 3 scheint dies viel einfacher zu sein.

Community
Bearbeitete Antwort 23. Mai 2017 в 12:26
Kommentare (5)

Den gleichen Effekt wie ein Hintergrundbild können Sie auch mit dem img-Tag erzielen. Sie müssen nur seinen z-Index niedriger als alles andere setzen, position:absolute einstellen und einen transparenten Hintergrund für jedes Feld im Vordergrund verwenden.

Kommentare (4)

Möchten Sie dies mit nur einem Bild erreichen? Sie können nämlich mit zwei Bildern etwas Ähnliches wie einen dehnbaren Hintergrund erzeugen. PNG Bilder zum Beispiel.

Ich habe das schon einmal gemacht, und es ist gar nicht so schwer. Außerdem glaube ich, dass die Qualität des Hintergrunds durch die Streckung beeinträchtigt würde. Und wenn man ein großes Bild hinzufügt, würde das langsame Computer und Browser verlangsamen.

Peter Mortensen
Bearbeitete Antwort 30. September 2012 в 3:51
Kommentare (3)