Das CSS-Hintergrundbild sollte der Breite und Höhe entsprechen und automatisch proportional skaliert werden

ich habe

body {
    background: url(images/background.svg);
}

Der gewünschte Effekt ist, dass dieses Hintergrundbild eine Breite hat, die der der Seite entspricht, wobei sich die Höhe ändert, um die Proportionen beizubehalten. Wenn das Originalbild beispielsweise 100 * 200 (beliebige Einheiten) ist und der Körper 600 Pixel breit ist, sollte das Hintergrundbild 1200 Pixel hoch sein. Die Höhe sollte sich automatisch ändern, wenn die Fenstergröße geändert wird. Ist das möglich?

Im Moment sieht es so aus, als würde Firefox die Höhe anpassen und dann die Breite anpassen. Liegt das vielleicht daran, dass die Höhe die längste Abmessung ist und versucht wird, ein Zuschneiden zu vermeiden? Ich möchte vertikal zuschneiden und dann scrollen: keine horizontale Wiederholung.

Außerdem platziert Chrome das Bild in der Mitte, keine Wiederholung, auch wenn dies background-repeat:repeatexplizit angegeben wird, was ohnehin die Standardeinstellung ist.

Hierfür gibt es eine CSS3-Eigenschaft, nämlich background-size( Kompatibilitätsprüfung ). Während man Längenwerte einstellen kann, wird es normalerweise mit den speziellen Werten containund verwendet cover. In Ihrem speziellen Fall sollten Sie Folgendes verwenden cover:

body {
    background-image:    url(images/background.svg);
    background-size:     cover;                      /* <------ */
    background-repeat:   no-repeat;
    background-position: center center;              /* optional, center the image */
}

Eiererklärung für containundcover

Entschuldigung für das schlechte Wortspiel, aber ich werde das Bild des Tages von Biswarup Ganguly zur Demonstration verwenden. Nehmen wir an, dies ist Ihr Bildschirm, und der graue Bereich befindet sich außerhalb Ihres sichtbaren Bildschirms. Zur Demonstration gehe ich von einem 16x9-Verhältnis aus.

Wir wollen das oben erwähnte Bild des Tages als Hintergrund verwenden. Aus irgendeinem Grund haben wir das Bild jedoch auf 4x3 zugeschnitten. Wir könnten die background-sizeEigenschaft auf eine feste Länge einstellen , aber wir werden uns auf containund konzentrieren cover. Beachten Sie, dass ich auch davon ausgehe, dass wir die Breite und / oder Höhe von nicht entstellt haben body.

contain

contain

Skalieren Sie das Bild unter Beibehaltung seines intrinsischen Seitenverhältnisses (falls vorhanden) auf die größte Größe, sodass sowohl seine Breite als auch seine Höhe in den Hintergrundpositionierungsbereich passen.

Dadurch wird sichergestellt, dass das Hintergrundbild immer vollständig im Hintergrundpositionierungsbereich enthalten ist. background-colorIn diesem Fall kann jedoch ein leerer Bereich mit Ihrem Bild gefüllt sein :

cover

cover

Skalieren Sie das Bild unter Beibehaltung seines intrinsischen Seitenverhältnisses (falls vorhanden) auf die kleinste Größe, sodass sowohl seine Breite als auch seine Höhe den Hintergrundpositionierungsbereich vollständig abdecken können.

Dies stellt sicher, dass das Hintergrundbild alles abdeckt. Es wird kein background-colorBild angezeigt. Abhängig vom Bildschirmverhältnis kann jedoch ein großer Teil Ihres Bildes abgeschnitten werden:

Demonstration mit aktuellem Code

div > div {
  background-image: url(http://i.stack.imgur.com/r5CAq.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-color: #ccc;
  border: 1px solid;
  width: 20em;
  height: 10em;
}
div.contain {
  background-size: contain;
}
div.cover {
  background-size: cover;
}
/********************************************
 Additional styles for the explanation boxes 
*********************************************/

div > div {
  margin: 0 1ex 1ex 0;
  float: left;
}
div + div {
  clear: both;
  border-top: 1px dashed silver;
  padding-top:1ex;
}
div > div::after {
  background-color: #000;
  color: #fefefe;
  margin: 1ex;
  padding: 1ex;
  opacity: 0.8;
  display: block;
  width: 10ex;
  font-size: 0.7em;
  content: attr(class);
}

<div>
  <div class="contain"></div>
  <p>Note the grey background. The image does not cover the whole region, but it's fully <em>contained</em>.
  </p>
</div>
<div>
  <div class="cover"></div>
  <p>Note the ducks/geese at the bottom of the image. Most of the water is cut, as well as a part of the sky. You don't see the complete image anymore, but neither do you see any background color; the image <em>covers</em> all of the <code>&lt;div&gt;</code>.</p>
</div>

Basierend auf den Tipps von https://developer.mozilla.org/en-US/docs/CSS/background-size erhalte ich das folgende Rezept, das für mich funktioniert hat

body {
        overflow-y: hidden ! important;
        overflow-x: hidden ! important;
        background-color: #f8f8f8;
        background-image: url('index.png');
        /*background-size: cover;*/
        background-size: contain;
        background-repeat: no-repeat;
        background-position: right;
}

Ich bin mir nicht sicher, wonach Sie genau suchen, aber Sie sollten sich unbedingt diese hervorragenden Blog-Beiträge von Chris Coyier von CSS-Tricks ansehen:

http://css-tricks.com/how-to-resizeable-background-image/

http://css-tricks.com/perfect-full-page-background-image/

Lesen Sie die Beschreibungen der einzelnen Artikel und prüfen Sie, ob sie das sind, wonach Sie suchen.

Der erste beantwortet die folgende Frage:

Gibt es eine Möglichkeit, die Größe eines Hintergrundbilds zu ändern? Füllen Sie den Hintergrund einer Webseite wie in mit einem Bild, unabhängig von der Größe des Browserfensters. Lassen Sie die Größe auch größer oder kleiner ändern, wenn sich das Browserfenster ändert. Stellen Sie außerdem sicher, dass das Verhältnis beibehalten wird (dehnt sich nicht seltsam aus). Verursacht auch keine Bildlaufleisten, sondern schneidet bei Bedarf nur vertikal ab. Kommt auch als Inline-Tag auf die Seite.

Das Ziel des zweiten Beitrags ist es, Folgendes zu erhalten: "Hintergrundbild auf einer Website, das jederzeit das gesamte Browserfenster abdeckt".

Hoffe das hilft.

Das Hintergrundbild ist nicht perfekt eingestellt, dann ist sein CSS-Problem beim Erstellen, sodass seine CSS-Datei in den folgenden Code geändert wird

html {  
  background-image: url("example.png");  
  background-repeat: no-repeat;  
  background-position: 0% 0%;
  background-size: 100% 100%;
}

%; Hintergrundgröße: 100% 100%; "

Versuche dies,

element.style {
    background: rgba(0, 0, 0, 0) url("img/shopping_bgImg.jpg") no-repeat scroll center center / cover;
}

Fügen Sie einfach diese eine Zeile hinzu:

    .your-class {
        height: 100vh;
    }

vh ist die Höhe des Ansichtsfensters. Dies wird automatisch an das Browserfenster des Geräts angepasst.

Überprüfen Sie hier mehr: Machen Sie div 100% Höhe des Browserfensters

body{
    background-image: url(../url/imageName.jpg);
    background-attachment: fixed;
    background-size: auto 100%;
    background-position: center;
}

Ich hatte das gleiche Problem und konnte die Größe des Bildes beim Anpassen der Browserabmessungen nicht ändern.

Schlechter Code:

html {  
  background-color: white;  
  background-image: url("example.png");  
  background-repeat: no-repeat;  
  background-attachment: scroll;  
  background-position: 0% 0%;
}

Guter Code:

html {  
  background-color: white;  
  background-image: url("example.png");  
  background-repeat: no-repeat;  
  background-attachment: scroll;  
  background-position: 0% 0%;
  background-size: contain;
}

Der Schlüssel hier ist das Hinzufügen dieses Elements -> Hintergrundgröße: enthalten;

Folgendes hat bei mir funktioniert:

background-size: auto 100%;

Das Einstellen der Hintergrundgröße hilft nicht, die folgende Lösung hat bei mir funktioniert:

.class {
    background-image: url(blablabla.jpg);
    /* Add this */
    height: auto;
}

Es beschneidet das Bild im Grunde genommen und passt es an, macht es aber background-size: contain/coverimmer noch nicht passend.