Stellen Sie die Bildgröße auf Hintergrundbild mit CSS?

CSS2

Wenn Sie brauchen, um das Bild größer, müssen Sie Bearbeiten Sie das Bild selbst in einem Bild-editor.

Wenn Sie mit dem img-tag, Sie können die Größe ändern, aber das würde nicht geben Ihnen das gewünschte Ergebnis, wenn Sie das Bild hintergrund für einige andere Inhalte (und es wird sich nicht wiederholen, wie Sie scheint zu wollen)...

CSS3 _{^{entfesseln Sie die Befugnisse}}

Dies ist möglich in CSS3 mit background-size.

Alle modernen Browser unterstützen dies, also, wenn Sie brauchen, um Unterstützung für alte Browser, ist dies der Weg, es zu tun.

_{Unterstützte Browser:}


^{Mozilla Firefox 4.0+ (Gecko 2.0+), Microsoft Internet Explorer 9.0+, Opera 10.0+, Safari 4.1+ (- webkit-532) und Chrome 3.0+.}

.stretch{
/* Will stretch to specified width/height */
  background-size: 200px 150px;
}
.stretch-content{
/* Will stretch to width/height of element */
  background-size: 100% 100%;
}

.resize-width{
/* width: 150px, height: auto to retain aspect ratio */
  background-size: 150px Auto;
}
.resize-height{
/* height: 150px, width: auto to retain aspect ratio */
  background-size: Auto 150px;
}
.resize-fill-and-clip{ 
  /* Resize to fill and retain aspect ratio.
     Will cause clipping if aspect ratio of box is different from image. */ 
  background-size: cover;
}
.resize-best-fit{
/* Resize to best fit and retain aspect ratio.
   Will cause gap if aspect ratio of box is different from image. */ 
  background-size: contain;
}

Insbesondere, wie ich die cover und contain Werte, gibt uns neue Kraft der Kontrolle, die wir zuvor nicht hatten.

Runde

Können Sie auch background-size: round haben eine Bedeutung in Kombination mit Wiederholung:

.resize-best-fit-in-repeat{
/* Resize to best fit in a whole number of times in x-direction */ 
  background-size: round auto; /* Height: auto is to keep aspect ratio */
  background-repeat: repeat;
}

Dieser passt die Breite des Bildes, damit es passt eine ganze Anzahl von Zeiten in den hintergrund positionieren-Bereich.

Zusätzlicher Hinweis

Wenn die Größe, die Sie brauchen, ist statische pixel-Größe, es ist immer noch klug, um körperlich die Größe des tatsächlichen Bildes. Dies ist sowohl zur Verbesserung der Qualität der die Größe neu (gegeben, dass Ihr Bild software macht einen besseren job als der Browser), und um Bandbreite zu sparen, wenn das original-Bild größer ist als das, was angezeigt werden soll.

InformationsquelleAutor der Antwort awe

Wenn Ihre Benutzer verwenden nur Opera 9.5+, Safari 3+, Internet Explorer 9+ und Firefox 3.6+, dann ist die Antwort ja. Ansonsten, Nein.

Den background-size Eigentum ist Teil von CSS 3, aber es wird nicht auf den meisten Browsern funktionieren.

Für Ihre Zwecke machen nur das eigentliche Bild größer.

InformationsquelleAutor der Antwort Christopher Tokar

Nicht allzu schwer, wenn Sie nicht Angst zu gehen ein wenig mehr in die Tiefe 🙂

Gibt es eine vergessen argument:

background-size: contain;

Diese nicht Strecken Sie Ihre background-image wie es würde tun mit cover. Es würde Strecken, bis die längere Seite erreicht die Breite oder die Höhe der äußere container und somit die Erhaltung der Bild.

Edit: Es gibt auch -webkit-background-size und -moz-background-size.

Die background-size-Eigenschaft wird unterstützt von IE9+, Firefox 4+, Opera, Chrome und Safari 5+.

^{Quelle: W3 Schools}

InformationsquelleAutor der Antwort kaiser

Du ganz können mit CSS3:

body {
    background-image: url(images/bg-body.png); 
    background-size: 100%; /* size the background image at 100% like any responsive img tag */
    background-position: top center;
    background-repeat:no-repeat;
 }

Dieser Größe wird ein hintergrund-Bild auf 100% Breite des body-Elements und wird dann die Größe der hintergrund entsprechend, als das body-element re-Größen für kleinere Auflösungen.

Hier ist das Beispiel: http://www.sccc.premiumdw.com/examples/resize-background-images-with-css/

InformationsquelleAutor der Antwort Mike Sinkula

Unterstützen Sie die Antwort, die @tetra gab, möchte ich darauf hinweisen, dass wenn das Bild ein SVG, dann die Größe des tatsächlichen Bildes ist nicht notwendig.

Da eine SVG-Datei ist nur XML können Sie angeben, was Größe, die Sie wollen, dass es innerhalb der XML.

Jedoch, wenn Sie mit der gleichen SVG-Bild in verschiedenen Orten und verschiedenen Größen, die dann mit background-size ist sehr hilfreich. SVG-Dateien sind von Natur aus kleiner als raster-Bilder sowieso und Größenänderung auf der fly mit CSS kann sehr hilfreich sein, ohne performance Kosten, dass ich mir bewusst bin, und sicherlich wenig bis keinen Verlust der Qualität.

Hier ist ein kurzes Beispiel:

<div class="hasBackgroundImage">content</div>

.hasBackgroundImage
{
    background: transparent url('/image/background.svg') no-repeat 10px 5px;
    background-size: 1.4em;
}

(Hinweis: dies funktioniert für mich in OS X 10.7 mit Firefox 8, Safari 5.1, Chrome 16.0.912.63)

InformationsquelleAutor der Antwort SunSparc

Können Sie nicht die Größe für Ihr Hintergrundbild mit der aktuellen version von CSS (2.1).

Kann nur gesetzt werden: positionfiximage-urlrepeat-modeund color.

InformationsquelleAutor der Antwort knittl

Du geschrieben hast

background: url('bg.gif') top repeat-y;    
background-size: 490px;

aber sehen Sie nur, der hintergrund, abhängig von der Größe des Containers.

wenn Sie einen leeren container mit der url-hintergrund und unabhängig von der Herkunft-Größe ist, werden Sie nicht sehen, die bg.gif.

Wenn Sie die Größe der continer zu

background: url('bg.gif') top repeat-y;    
background-size: 490px;
height: 490px;
width: 490px;

kombiniert werden, um den code, den Sie oben geschrieben haben, werden Sie in der Lage, um zu sehen, die bg.gif Datei.

InformationsquelleAutor der Antwort Carlos Calla

background-size funktioniert in Chrome 4.1, aber so weit konnte ich nicht damit es funktioniert in Firefox 3.6.

InformationsquelleAutor der Antwort silversky

Beispielsweise:

Hintergrundbild wird immer passen auf container-Größe (Breite 100% und Höhe 100 Pixel).

Cross-browser CSS:

.app-header {
background: url("themes/default/images/background.jpg") no-repeat;
-moz-background-size: 100% 100px;
-webkit-background-size: 100% 100px;
-o-background-size: 100% 100px;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src = "themes/default/images/background.jpg", sizingMethod = 'scale');
background-size: 100% 100px;

}

InformationsquelleAutor der Antwort skyrosbit