Dehnen und skalieren Sie ein CSS-Bild im Hintergrund - nur mit CSS

853

Ich möchte, dass mein Hintergrundbild je nach Größe des Browser-Ansichtsfensters gedehnt und skaliert wird.

Ich habe einige Fragen zum Stapelüberlauf gesehen, die den Job erledigen, wie zum Beispiel das Strecken und Skalieren des CSS-Hintergrunds . Es funktioniert gut, aber ich möchte das Bild mit backgroundund nicht mit einem imgTag platzieren.

In diesem wird ein imgTag platziert, und dann würdigen wir mit CSS das imgTag.

width:100%; height:100%;

Es funktioniert, aber diese Frage ist etwas alt und besagt, dass in CSS 3 die Größenänderung eines Hintergrundbilds ziemlich gut funktioniert. Ich habe dieses Beispiel als erstes ausprobiert , aber es hat für mich nicht geklappt.

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

css  background 
— Fábio Antunes
quelle
113
Hintergrundgröße: 100% 100%;
— Andreas L.
5
Vielleicht kann diese Demo hilfreich sein: w3schools.com/cssref/…
— Davide
1
— Alex Angas
@AlexAngas Sollte das Alter der Frage nicht ein Faktor sein? Dieser wurde vor 6 Jahren gestellt und die Frage, auf die Sie hinweisen, wurde vor 4 Jahren gestellt.
— Fábio Antunes
@ FábioAntunes IMHO möchten wir die Frage nicht mit den besten Antworten schließen und stattdessen Duplikate dazu ermutigen, darauf zu verlinken. Ich bin sicher, dass dies auf Meta diskutiert worden wäre, aber ich kann es jetzt nicht finden ...
— Alex Angas

Antworten:

1047

CSS3 hat ein nettes kleines Attribut namens background-size:cover.

Dadurch wird das Bild so skaliert, dass der Hintergrundbereich vollständig vom Hintergrundbild abgedeckt wird, während das Seitenverhältnis beibehalten wird. Der gesamte Bereich wird abgedeckt. Ein Teil des Bildes ist jedoch möglicherweise nicht sichtbar, wenn die Breite / Höhe des verkleinerten Bildes zu groß ist.

— Vashishtha Jogi
quelle
11
Cover beschneidet das Bild, wenn das Seitenverhältnis nicht übereinstimmt, daher ist es keine gute allgemeine Lösung.
— Mahemoff
1
falls Sie möchten, dass es in IE-Browsern funktioniert - github.com/louisremi/background-size-polyfill
— Wreeecks
4
Unter Firefox scheint es nicht zu funktionieren. Allerdings background-size: 100vw 100vh;funktioniert der Trick gut.
— Yannick Mauray
5
@ YannickMauray versuchen: background-size: cover; -ms-background-size: cover; -o-background-size: cover; -moz-background-size: cover; -webkit-background-size: cover;
— Amit Kumar Khare
2
Wenn Sie dies möchten, aber nur für die horizontale Achse, verwenden Sie dies: background-size: 100% auto; stackoverflow.com/questions/41025630/…
— antoineMoPa
470

Sie können die CSS3-Eigenschaft verwenden, um dies ganz gut zu tun. Die Größe wird auf das Verhältnis angepasst, sodass keine Bildverzerrungen auftreten (obwohl kleine Bilder hochskaliert werden). Beachten Sie nur, dass es noch nicht in allen Browsern implementiert ist.

background-size: 100%;
— Matt Burgess
quelle
19
@nXqd Das ist so ziemlich der vollständige Code! Erstellen Sie einen Container mit a background-imageund fügen Sie die obige Eigenschaft hinzu. Wie bereits erwähnt, ist die Browserunterstützung noch nicht gut und es gibt browserspezifische Versionen davon, d. H. -webkit-background-sizeusw. Siehe W3C CSS3-Modul: Hintergrundgröße und css3.info: Hintergrundgröße
— MrWhite
15
Um das Seitenverhältnis des Bildes beizubehalten, sollten Sie "Hintergrundgröße: Cover" verwenden. oder "Hintergrundgröße: enthalten;". Ich habe eine Polyfüllung erstellt, die diese Werte in IE8 implementiert: github.com/louisremi/background-size-polyfill
— Louis-Rémi
4
Es ist auch ratsam, hinzuzufügen auto, um das Seitenverhältnis beizubehalten.
— Chibueze Opata
186

Mit dem Code, den ich erwähnt habe ...

HTML

<div id="background">
    <img src="img.jpg" class="stretch" alt="" />
</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%;
}

Das erzeugt den gewünschten Effekt: Nur der Inhalt wird gescrollt, nicht der Hintergrund.

Das Hintergrundbild wird für jede Bildschirmgröße in das Browser-Ansichtsfenster geändert. Wenn der Inhalt nicht in das Browser-Ansichtsfenster passt und der Benutzer die Seite scrollen muss, bleibt das Hintergrundbild im Ansichtsfenster fixiert, während der Inhalt einen Bildlauf durchführt.

Mit CSS 3 scheint dies viel einfacher zu sein.

— Fábio Antunes
quelle
12
Dies ist jedoch kein Hintergrundbild. Sie können dies nur für einen Block tun, nicht jedoch für ein Inline-Element wie eine Eingabe [type = text]. Oder liege ich falsch?
— Deerchao
11
Keine Notwendigkeit für die Klasse = "Stretch", verwenden Sie einfach #background img {} als Bezeichner in der CSS
— BerggreenDK
Z-Index: -1; hält dein Bild im Hintergrund. Wenn Sie Ihr Bild im Vordergrund anzeigen möchten, können Sie entweder den Z-Index-Wert erhöhen oder diesen Index entfernen.
— Gokhanakkurt
Das Problem, das ich habe, ist mit IE8. Das Hintergrundbild eines DIV erstreckt sich vollständig, aber in IE8 werden die Bilder außerhalb des DIV angezeigt, sodass das vollständige Bild nicht angezeigt werden kann. Es wird herausgeschnitten. Hier ist meine Frage: stackoverflow.com/questions/22331179/…
— Si8
1
Der offensichtliche Fehler, den Menschen machen, besteht darin, das Hintergrundbild in das CSS (dh von background : url("example.png");) einzufügen und dann das CSS-Attribut background-size:100%;darunter zu verwenden, um das Bild hoffentlich auf die Bildschirmbreite zu skalieren. Das wird nicht funktionieren, oder? Wenn Sie ein Hintergrundbild für den Körper einfügen möchten, sollte dem Körper-Tag wie folgt ein Bildattribut hinzugefügt werden <body background="example.png">. Verwenden Sie dann CSS background-size:100%;, um es zu skalieren.
— Sjsam
166

CSS:

html,body {
    background: url(images/bg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover; /* For WebKit*/
    -moz-background-size: cover;    /* Mozilla*/
    -o-background-size: cover;      /* Opera*/
    background-size: cover;         /* Generic*/
}
— Josh Crozier
quelle
Dies funktioniert jedoch nicht in IE8. Es wird ein Rand oben und unten im Fenster erstellt.
— Erdomester
Unter Android funktionierte es bei der Verwendung html, body {...}anstelle von body {...}.
— Edward
53 
background-size: 100% 100%;

Dehnt den Hintergrund aus, um das gesamte Element auf beiden Achsen auszufüllen.

— yeahdixon
quelle
40

Der folgende CSS-Teil sollte das Bild mit allen Browsern strecken.

Ich mache das dynamisch für jede Seite. Daher verwende ich PHP, um für jede Seite ein eigenes HTML-Tag zu generieren. Alle Bilder befinden sich im Ordner 'image' und enden mit 'Bg.jpg'.

<html style="
      background: url(images/'.$pic.'Bg.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=\'images/'.$pic.'Bg.jpg\',     sizingMethod=\'scale\');
      -ms-filter: \"progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/'.$pic.'Bg.jpg\', sizingMethod=\'scale\')\
";>

Wenn Sie nur ein Hintergrundbild für alle Seiten haben, können Sie die $picVariable entfernen, maskierte Schrägstriche entfernen, Pfade anpassen und diesen Code in Ihre CSS-Datei einfügen.

html{
    background: url(images/homeBg.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='images/homeBg.jpg',     sizingMethod='scale');
    -ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/homeBg', sizingMethod='scale');
}

Dies wurde mit Internet Explorer 9, Chrome 21 und Firefox 14 getestet.

— Thorsten Niehues
quelle
2
Ihr Beispiel funktioniert im Sinne der Abwärtskompatibilität nicht, weil Sie einfach das führende '-' der Herstellerpräfixe vergessen haben. Es muss sein -webkit-background-size, -moz-background-sizeund so weiter. Siehe developer.mozilla.org/en-US/docs/CSS/… oder Sie versuchen, es zukunftssicher in Kurzschrift-Eigenschaften wiebackground: url(img/bg-home.jpg) no-repeat center center / cover fixed;
— Volker E.
Dies war die einzige Lösung, die für mich unter IE9 funktionieren würde. Vielen Dank.
— Robnick
17

Mit dem img-Tag können Sie tatsächlich den gleichen Effekt wie mit einem Hintergrundbild erzielen. Sie müssen nur den Z-Index niedriger als alles andere einstellen, die Position absolut festlegen und für jedes Feld im Vordergrund einen transparenten Hintergrund verwenden.

— Kim Stebel
quelle
Das ist, was ich in anderen SO-Fragen gesehen habe und funktioniert, aber seit CSS3 herauskommt, dachte ich, dass dies jetzt ein besserer Weg ist.
— Fábio Antunes
3
Unter Berücksichtigung der Entwicklungen bei der Browsernutzung können Sie diese möglicherweise in nur ... 10 Jahren kommerziell nutzen.
— Kim Stebel
Als CSS3 ist es nichts Falsches, eine Eigenschaft zu verwenden, die die modernsten Browser sehen, und nicht unterstützten Browsern einen Mindeststandard zu geben. Hier können Sie beispielsweise einen langweiligen, aber akzeptablen gekachelten Hintergrund für <IE8 und ein schönes Bild für Firefox / Chrome / Safari / Opera verwenden. Es gibt auch viele Polyfills, um die CSS3-Funktionalität in älteren Browsern mit JavaScript zu replizieren. Mit anderen Worten, Sie müssen nicht darauf warten, dass jeder Browser CSS3 unterstützt, um es zu verwenden.
— Dan Blows
Habe gerade diesen anderen Beitrag gefunden, der auf die Verwendung des proprietären MS AlphaImageLoader verweist: stackoverflow.com/questions/2991623/…
— uglymunky
17

Verwenden Sie dieses CSS:

background: url('img.png') no-repeat; 
background-size: 100%;
— RSH1
quelle
15

Es wird durch CSS-Tricks erklärt: Perfektes ganzseitiges Hintergrundbild

Demo: https://css-tricks.com/examples/FullPageBackgroundImage/progressive.php

Code:

body {
  background: url(images/myBackground.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
— Aamer Shahzad
quelle
Basierend auf der obigen Antwort habe ich gesehen, dass die Korrektur von Hintergrundanhängen auf Mobilgeräten und Microsoft Edge nicht funktioniert. Die perfekte Lösung, um den Hintergrund auf allen Geräten und Browsern zu dehnen und zu reparieren. Ich empfehle jquery-backstretch.com
— Aamer Shahzad
15

Sie können diese Klasse zu Ihrer CSS-Datei hinzufügen.

.stretch {
    background: url(images/bg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

Es funktioniert in:

  • Safari 3 oder höher
  • Chrome Was auch immer oder später
  • Internet Explorer 9 oder höher
  • Opera 10 oder höher (Opera 9.5 wird unterstützt background-size, aber nicht die Schlüsselwörter)
  • Firefox 3.6 oder höher (Firefox 4 unterstützt Präfixversionen anderer Hersteller)
— Arunraj S.
quelle
Dies ist eine funktionierende "Stretch to Fit" -Antwort. Hinweis: Das Seitenverhältnis ändert sich.
— Devdrc
10

Verwenden Sie Folgendes, um Ihre Bilder basierend auf der Containergröße entsprechend zu skalieren:

background-size: contain;
background-repeat: no-repeat;
— justinpees
quelle
9

Ich benutze dies und es funktioniert mit allen Browsern:

<html>
    <head>
        <title>Stretched Background Image</title>
        <style type="text/css">
            /* Remove margins from the 'html' and 'body' tags, and ensure the page takes up full screen height. */
            html, body {height:100%; margin:0; padding:0;}

            /* Set the position and dimensions of the background image. */
            #page-background {position:fixed; top:0; left:0; width:100%; height:100%;}

            /* Specify the position and layering for the content that needs to appear in front of the background image. Must have a higher z-index value than the background image. Also add some padding to compensate for removing the margin from the 'html' and 'body' tags. */
            #content {position:relative; z-index:1; padding:10px;}
        </style>
        <!-- The above code doesn't work in Internet Explorer 6. To address this, we use a conditional comment to specify an alternative style sheet for IE 6. -->
        <!--[if IE 6]>
        <style type="text/css">
            html {overflow-y:hidden;}
            body {overflow-y:auto;}
            #page-background {position:absolute; z-index:-1;}
            #content {position:static;padding:10px;}
        </style>
        <![endif]-->
    </head>
    <body>
        <div id="page-background"><img src="http://www.quackit.com/pix/milford_sound/milford_sound.jpg" width="100%" height="100%" alt="Smile"></div>
        <div id="content">
            <h2>Stretch that Background Image!</h2>
            <p>This text appears in front of the background image. This is because we've used CSS to layer the content in front of the background image. The background image will stretch to fit your browser window. You can see the image grow and shrink as you resize your browser.</p>
            <p>Go on, try it - resize your browser!</p>
        </div>
    </body>
</html>
— Mahdi Jokar
quelle
9

Vielen Dank!

Aber dann funktionierte es nicht für die Browser Google Chrome und Safari (Stretching funktionierte, aber die Höhe der Bilder betrug nur 2 mm!) , Bis mir jemand sagte, was fehlt:

Versuchen Sie zu setzen height:auto;min-height:100%;

Ändern Sie das für Ihre height:100%;Linie, ergibt:

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

.stretch {
    width:100%;
    height:auto;
    min-height:100%;
}

Kurz vor diesem neu hinzugefügten Code habe ich dies in meinen Drupal Tendu- Themen style.css:

HTML, Körper {Höhe: 100%;}

#page {Hintergrund: #ffffff; Höhe: auto! wichtig; Höhe: 100%; Mindesthöhe: 100%; Position: relativ;}

Dann muss ich in Drupal einen neuen Block mit dem Bild erstellen, während ich Folgendes hinzufüge class=stretch:

<img alt = "" class = "align" src = "pic.url" />

Nur ein Bild mit dem Editor in diesem Drupal-Block zu kopieren, funktioniert nicht. Man muss den Editor in nicht formatierten Text ändern.

— Cybr
quelle
8

Ich stimme dem Bild in absoluter Div mit 100% Breite und Höhe zu. Stellen Sie sicher, dass Sie im CSS 100% Breite und Höhe für den Körper festlegen und die Ränder und Auffüllungen auf Null setzen. Ein weiteres Problem bei dieser Methode besteht darin, dass der Auswahlbereich bei der Auswahl von Text manchmal das Hintergrundbild umfasst, was den unglücklichen Effekt hat, dass die gesamte Seite den ausgewählten Status hat. Sie können dies user-select:noneumgehen, indem Sie die CSS-Regel wie folgt verwenden:

<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 Internet Explorer der Bösewicht, da die Benutzerauswahloption nicht erkannt wird - nicht einmal die Vorschau von Internet Explorer 10 unterstützt sie. Sie haben also die Möglichkeit, entweder JavaScript zu verwenden, um die Auswahl von Hintergrundbildern zu verhindern (z. B. http) : //www.felgall.com/jstip35.htm ) oder mit der CSS 3- Hintergrund-Stretch-Methode.

Für SEO würde ich das Hintergrundbild am unteren Rand der Seite platzieren. Wenn das Laden des Hintergrundbilds jedoch zu lange dauert (dh anfangs mit einem weißen Hintergrund), können Sie zum oberen Rand der Seite wechseln.

— Myke Black
quelle
dann benutze nicht img nur ein div mit bg es sollte nicht ausgewählt werden
— Jacek Pietal
7

Ich wollte ein Hintergrundbild zentrieren und skalieren, ohne es auf die gesamte Seite zu strecken, und ich wollte, dass das Seitenverhältnis beibehalten wird. Dies funktionierte für mich dank der in anderen Antworten vorgeschlagenen Variationen:

INLINE-BILD: ------------------------

<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%;
}
— AnnieDee
quelle
5

Ich habe eine Kombination der Hintergrund-X-CSS-Eigenschaften verwendet, um das ideale skalierende Hintergrundbild zu erzielen.

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.

— Ryan Den-Kaat
quelle
4

Verwenden Sie das Backstretch- Plugin. Man könnte sogar mehrere Bilder schieben lassen. Es funktioniert auch in Containern. Auf diese Weise könnte beispielsweise nur ein Teil des Hintergrunds mit einem Hintergrundbild bedeckt sein.

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

— Daniel
quelle
3

Wenn Sie den Inhalt horizontal zentrieren möchten, verwenden Sie eine Kombination wie folgt:

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

Das wird schön aussehen.

— Samuel Ramzan
quelle
1

Mit der border-image : yourimageEigenschaft können Sie das Bild bis zum Rand skalieren. Selbst wenn Sie das Hintergrundbild angeben, wird das Randbild darüber gezeichnet.

Die border-imageEigenschaft ist sehr nützlich, wenn Ihr Stylesheet an einer Stelle implementiert ist, die CSS 3 nicht unterstützt. Wenn Sie Google Chrome oder Firefox verwenden, empfehle ich die background-size:coverEigenschaft selbst.

— Natesh bhat
quelle
0

Möchten Sie dies mit nur einem Bild erreichen? Weil Sie mit zwei Bildern tatsächlich etwas wie einen streckenden Hintergrund machen können. PNGZum Beispiel Bilder.

Ich habe das schon einmal gemacht und es ist nicht so schwer. Außerdem denke ich, dass Dehnen nur die Qualität des Hintergrunds beeinträchtigen würde. Und wenn Sie ein großes Bild hinzufügen, werden langsame Computer und Browser verlangsamt.

— MarioRicalde
quelle
Guter Punkt. Aber ich benutze JPG für das Hintergrundbild, sie ist etwa 1500x1000 dauert nur etwas mehr als 100kb. Aber wie hast du das gemacht?
— Fábio Antunes
1
Wie wäre es, wenn Sie das Bild horizontal zentrieren und die Bildränder mit einer Volltonfarbe oder einem Muster weicher machen? Dies würde Ihnen eine nahtlose Anpassung ermöglichen, wenn der Benutzer mehr als die Bildauflösung hat.
— MarioRicalde
Aber ich möchte, dass das Bild den Hintergrund ausfüllt. Das, was du sagst, das mache ich normalerweise.
— Fábio Antunes
0

Folgendes hat bei mir funktioniert.

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

das hat funktioniert, um den gesamten Hintergrund in verschiedenen Dimensionen abzudecken

— tony2tones
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.