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

Question

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

Gefragt el 19 de Juli, 2009: Wann wurde die Frage gestellt
1852757 Ansichten: Anzahl der Besuche der Frage
5 Antworten: Anzahl der Fragenantworten
Gelöst: Aktueller Status der Frage

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?

Gefragt el 19 de Juli, 2009 von Fábio Antunes

137 Stimmen

Hintergrundgröße: 100% 100%;

Kommentiert el 30 de August, 2014 von Andreas L.

9 Stimmen

Vielleicht kann diese Demo hilfreich sein: w3schools.com/cssref/

Kommentiert el 7 de Januar, 2015 von Davide

1 Stimmen

Mögliches Duplikat von CSS-Hintergrundbild an die Breite anpassen, Höhe sollte automatisch proportional skaliert werden

Kommentiert el 1 de Marsch, 2016 von Alex Angas

Anzeigen 1 weitere Kommentare

Answer 1

5 Antworten

Answer 2

8voto

AnnieDee Punkte 91

Ich wollte ein Hintergrundbild zentrieren und skalieren, ohne es auf die gesamte Seite auszudehnen, und ich wollte, dass das Seitenverhältnis beibehalten wird. Das hat dank der in anderen Antworten vorgeschlagenen Variationen funktioniert:

INLINE IMAGE: ------------------------

<div id="background">
    <img src="img.jpg" class="stretch" alt="" />
</div>

CSS ----------------------------------

html {
    height:100%;
}

#background {
    text-align: center;
    width: 100%; 
    height: 100%; 
    position: fixed;
    left: 0px; 
    top: 0px; 
    z-index: -1;
}

.stretch {
    margin: auto;
    height:100%;
}

Beantwortet el 24 de Dezember, 2010 von AnnieDee (91 Punkte )

Answer 3

8voto

Myke Black Punkte 1249

Ich stimme mit dem Bild in absoluten div mit 100% Breite und Höhe. Stellen Sie sicher, dass Sie 100% Breite und Höhe für den Körper in der CSS und setzen Sie Ränder und Polsterung auf Null. Ein weiteres Problem, das bei dieser Methode auftritt, ist, dass bei der Auswahl von Text der Auswahlbereich manchmal das Hintergrundbild umfassen kann, was den unglücklichen Effekt hat, dass die gesamte Seite den ausgewählten Status hat. Sie können dies umgehen, indem Sie die user-select:none CSS-Regel, etwa so:

<html>
    <head>
        <style type="text/css">

            html,body {
                height: 100%;
                width: 100%
                margin: none;
                padding: none;
            }

            #background {
                width: 100%;
                height: 100%;
                position: fixed;
                left: 0px;
                top: 0px;
                z-index: -99999;
                -webkit-user-select: none;
                -khtml-user-select: none;
                -moz-user-select: none;
                -o-user-select: none;
                user-select: none;
            }

            #background img {
                width: 100%;
                height: 100%;
            }

            #main{ z-index:10;}
        </style>
    </head>
    <body>
        <div id="main">
            content here
        </div>
        <div id="background"><img src="bg.jpg"></div>
    </body>
</html>

Auch hier ist der Internet Explorer der Bösewicht, denn er erkennt die Benutzerauswahloption nicht - nicht einmal Internet Explorer 10 Vorschau unterstützt dies, so dass Sie die Möglichkeit haben, entweder JavaScript zu verwenden, um die Auswahl von Hintergrundbildern zu verhindern (z. B., http://www.felgall.com/jstip35.htm ) oder mit CSS 3 Hintergrund-Stretch-Methode.

Auch für SEO Ich würde das Hintergrundbild unten auf der Seite platzieren, aber wenn das Laden des Hintergrundbildes zu lange dauert (d. h. mit einem weißen Hintergrund am Anfang), könnten Sie es an den Anfang der Seite verschieben.

Beantwortet el 6 de Juli, 2011 von Myke Black (1249 Punkte )

0 Stimmen

Dann nicht verwenden img nur ein div mit bg es sollte nicht ausgewählt werden

Kommentiert el 18 de Oktober, 2013 von Jacek Pietal

Answer 4

5voto

Ryan Den-Kaat Punkte 108

Ich habe eine Kombination aus den CSS-Eigenschaften von background-X verwendet, um das ideale skalierende Hintergrundbild zu erhalten.

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

Dadurch deckt der Hintergrund immer das gesamte Browserfenster ab und bleibt beim Skalieren zentriert.

Beantwortet el 12 de November, 2018 von Ryan Den-Kaat (108 Punkte )

Answer 5

5voto

tony2tones Punkte 1064

Bei mir hat das Folgende funktioniert.

.back-ground {
   background-image: url("../assets/background.png");
   background-size: 100vw 100vh;
}

die darauf abzielten, den gesamten Hintergrund in verschiedenen Dimensionen zu erfassen

Beantwortet el 25 de Marsch, 2020 von tony2tones (1064 Punkte )

0 Stimmen

Von welcher Version sprechen wir hier? Ich glaube auch, dass der IE nicht mehr weiterentwickelt wird.

Kommentiert el 27 de Kann, 2021 von tony2tones

Answer 6

4voto

Daniel Punkte 93

Verwenden Sie die Gegengerade Plugin. Man kann sogar mehrere Bilder gleiten lassen. Es funktioniert auch innerhalb von Containern. So könnte man zum Beispiel nur einen Teil des Hintergrunds mit einem Hintergrundbild bedecken lassen.

Da sogar ich es zum Laufen bringen konnte, beweist es, dass es ein einfach zu benutzendes Plugin ist :).

Beantwortet el 10 de September, 2013 von Daniel (93 Punkte )

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

Antworten

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by:

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

Antworten

Verwandte Fragen

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by: