CSS-Hintergrund dehnen und skalieren

Question

Gibt es eine Möglichkeit, einen Hintergrund in CSS so zu dehnen oder zu skalieren, dass er seinen Container ausfüllt?

Answer 1

Verwenden Sie die CSS 3 Eigenschaft background-size :

#my_container {
    background-size: 100% auto; /* width and height, can be %, px or whatever. */
}

Diese ist seit 2012 für moderne Browser verfügbar.

Answer 2

Bei modernen Browsern können Sie dies erreichen, indem Sie background-size :

body {
    background-image: url(bg.jpg);
    background-size: cover;
}

cover bedeutet, dass das Bild entweder vertikal oder horizontal gestreckt wird, damit es sich nicht kachelt/wiederholt.

Das würde für Safari 3 (oder höher) und Chrome funktionieren, Oper 10+, Firefox 3.6+, und Internet Explorer 9 (oder höher).

Damit es mit niedrigeren Versionen von Internet Explorer funktioniert, versuchen Sie diese CSS:

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";

Answer 3

Die Skalierung eines Bildes mit CSS ist nicht ganz möglich, aber ein ähnlicher Effekt kann auf folgende Weise erzielt werden.

Verwenden Sie diese Markierung:

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

mit dem folgenden CSS:

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

.stretch {
    width:100%;
    height:100%;
}

und Sie sollten fertig sein!

Um das Bild so zu skalieren, dass es "voll beschnitten" ist und das Seitenverhältnis beibehalten wird, können Sie stattdessen Folgendes tun:

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

Das klappt sehr gut! Wenn eine Dimension beschnitten wird, wird sie jedoch nur auf einer Seite des Bildes beschnitten und nicht gleichmäßig auf beiden Seiten (und zentriert). Ich habe es in Firefox getestet, Webkit und Internet Explorer 8.

Answer 4

Verwenden Sie die Attribut "Hintergrundgröße in CSS3:

.class {
     background-image: url(bg.gif);
     background-size: 100%;
}

EDIT: Modernizr unterstützt Erkennung der Unterstützung der Hintergrundgröße . Sie können eine JavaScript-Umgehung verwenden, die so geschrieben ist, dass sie funktioniert, wie Sie sie brauchen, und sie dynamisch laden, wenn keine Unterstützung vorhanden ist. Auf diese Weise bleibt der Code wartbar, ohne dass Sie auf umständliche CSS-Hacks für bestimmte Browser zurückgreifen müssen.

Ich persönlich benutze ein Skript, um damit umzugehen, indem ich jQuery verwende, eine Adaption von imgsizer . Da die meisten Designs, die ich jetzt mache, Breitenprozente für flüssige Layouts über verschiedene Geräte hinweg verwenden, gibt es eine leichte Anpassung an eine der Schleifen (um Größen zu berücksichtigen, die nicht immer 100% sind):

for (var i = 0; i < images.length; i++) {
    var image = images[i],
        width = String(image.currentStyle.width);

    if (width.indexOf('%') == -1) {
        continue;
    }

    image.origWidth = image.offsetWidth;
    image.origHeight = image.offsetHeight;

    imgCache.push(image);
    c.ieAlpha(image);
    image.style.width = width;
}

EDIT: Das könnte Sie auch interessieren jQuery CSS3 Finaliz[s]e .

Answer 5

Versuchen Sie den Artikel Hintergrund-Größe . Wenn Sie alle der folgenden Optionen verwenden, funktioniert es in den meisten Browsern außer Internet Explorer.

.foo {
    background-image: url(bg-image.png);
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    -webkit-background-size: 100% 100%; 
    background-size: 100% 100%;
}