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

Question

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 diese Aufgabe erfüllen, z. B. CSS-Hintergrund dehnen und skalieren zum Beispiel. Das funktioniert gut, aber ich möchte das Bild mit background , nicht mit einer img Tag.

Darin wird ein img Tag platziert wird, und dann mit CSS wir Tribut an die img Tag.

width:100%; height:100%;

Es funktioniert, aber diese Frage ist ein bisschen alt, und besagt, dass in CSS 3 die Größe eines Hintergrundbildes wird ziemlich gut funktionieren. Ich habe dies versucht Beispiel die erste aber das hat bei mir nicht geklappt.

Gibt es eine gute Methode, dies mit dem background-image Erklärung?

Answer 1

Wenn Sie den Inhalt horizontal zentriert haben möchten, verwenden Sie eine Kombination wie diese:

background-repeat: no-repeat;
background-size: cover;
background-position: center;

Das wird wunderschön aussehen.

Answer 2

Sie können die border-image : yourimage um das Bild bis zum Rand zu skalieren. Auch wenn Sie das Hintergrundbild angeben, wird das Randbild darüber gezeichnet.

El border-image Eigenschaft ist sehr nützlich, wenn Ihr Stylesheet irgendwo implementiert ist, das CSS 3 nicht unterstützt. Wenn Sie Google Chrome oder Firefox verwenden, empfehle ich die background-size:cover Eigenschaft selbst.

Answer 3

Verwenden Sie dieses CSS:

background-size: 100% 100%