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 background
und nicht mit einem img
Tag platzieren.
In diesem wird ein img
Tag platziert, und dann würdigen wir mit CSS das img
Tag.
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-image
Erklärung zu tun ?
css
background
Fábio Antunes
quelle
quelle
Antworten:
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.
quelle
background-size: 100vw 100vh;
funktioniert der Trick gut.background-size: cover; -ms-background-size: cover; -o-background-size: cover; -moz-background-size: cover; -webkit-background-size: cover;
background-size: 100% auto;
stackoverflow.com/questions/41025630/…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.
quelle
background-image
und 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-size
usw. Siehe W3C CSS3-Modul: Hintergrundgröße und css3.info: Hintergrundgrößeauto
, um das Seitenverhältnis beizubehalten.Mit dem Code, den ich erwähnt habe ...
HTML
CSS
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.
quelle
background : url("example.png");
) einzufügen und dann das CSS-Attributbackground-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 CSSbackground-size:100%;
, um es zu skalieren.CSS:
quelle
html, body {...}
anstelle vonbody {...}
.Dehnt den Hintergrund aus, um das gesamte Element auf beiden Achsen auszufüllen.
quelle
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'.
Wenn Sie nur ein Hintergrundbild für alle Seiten haben, können Sie die
$pic
Variable entfernen, maskierte Schrägstriche entfernen, Pfade anpassen und diesen Code in Ihre CSS-Datei einfügen.Dies wurde mit Internet Explorer 9, Chrome 21 und Firefox 14 getestet.
quelle
-webkit-background-size
,-moz-background-size
und 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;
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.
quelle
Verwenden Sie dieses CSS:
quelle
Es wird durch CSS-Tricks erklärt: Perfektes ganzseitiges Hintergrundbild
Demo: https://css-tricks.com/examples/FullPageBackgroundImage/progressive.php
Code:
quelle
Sie können diese Klasse zu Ihrer CSS-Datei hinzufügen.
Es funktioniert in:
background-size
, aber nicht die Schlüsselwörter)quelle
Verwenden Sie Folgendes, um Ihre Bilder basierend auf der Containergröße entsprechend zu skalieren:
quelle
Ich benutze dies und es funktioniert mit allen Browsern:
quelle
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:
Ändern Sie das für Ihre
height:100%;
Linie, ergibt:Kurz vor diesem neu hinzugefügten Code habe ich dies in meinen Drupal Tendu- Themen
style.css
:Dann muss ich in Drupal einen neuen Block mit dem Bild erstellen, während ich Folgendes hinzufüge
class=stretch
:Nur ein Bild mit dem Editor in diesem Drupal-Block zu kopieren, funktioniert nicht. Man muss den Editor in nicht formatierten Text ändern.
quelle
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:none
umgehen, indem Sie die CSS-Regel wie folgt verwenden: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.
quelle
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: ------------------------
CSS ----------------------------------
quelle
Ich habe eine Kombination der Hintergrund-X-CSS-Eigenschaften verwendet, um das ideale skalierende Hintergrundbild zu erzielen.
Dadurch deckt der Hintergrund immer das gesamte Browserfenster ab und bleibt beim Skalieren zentriert.
quelle
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 :).
quelle
Wenn Sie den Inhalt horizontal zentrieren möchten, verwenden Sie eine Kombination wie folgt:
Das wird schön aussehen.
quelle
Verwenden Sie dieses CSS:
background-size: 100% 100%
quelle
Mit der
border-image : yourimage
Eigenschaft können Sie das Bild bis zum Rand skalieren. Selbst wenn Sie das Hintergrundbild angeben, wird das Randbild darüber gezeichnet.Die
border-image
Eigenschaft 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 diebackground-size:cover
Eigenschaft selbst.quelle
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.
quelle
Folgendes hat bei mir funktioniert.
das hat funktioniert, um den gesamten Hintergrund in verschiedenen Dimensionen abzudecken
quelle