CSS-Hintergrund dehnen und skalieren

Gibt es eine Möglichkeit, einen Hintergrund in CSS zu dehnen oder zu skalieren, um seinen Container zu füllen?

Für moderne Browser können Sie dies erreichen, indem Sie Folgendes verwenden background-size:

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

cover bedeutet, dass das Bild entweder vertikal oder horizontal gestreckt wird, damit es niemals gekachelt / wiederholt wird.

Dies funktioniert für Safari 3 (oder höher), Chrome, Opera 10+, Firefox 3.6+ und Internet Explorer 9 (oder höher).

Probieren Sie dieses CSS aus, damit es mit niedrigeren Versionen von Internet Explorer funktioniert:

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

Verwenden Sie die CSS 3- Eigenschaft background-size:

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

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

Das Skalieren eines Bildes mit CSS ist nicht ganz möglich, ein ähnlicher Effekt kann jedoch auf folgende Weise erzielt werden.

Verwenden Sie dieses Markup:

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

mit folgendem CSS:

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

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

und du solltest 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; }

Es klappt ganz gut! Wenn eine Dimension jedoch zugeschnitten wird, wird sie nur auf einer Seite des Bildes zugeschnitten, anstatt auf beiden Seiten gleichmäßig (und zentriert) zu beschneiden. Ich habe es in Firefox, Webkit und Internet Explorer 8 getestet .

Verwenden Sie das Hintergrundgrößenattribut in CSS3:

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

BEARBEITEN: Modernizr unterstützt die Erkennung von Hintergrundgrößen . Sie können eine JavaScript-Problemumgehung verwenden, die für die Arbeit geschrieben wurde, wie Sie sie benötigen, und sie dynamisch laden, wenn keine Unterstützung vorhanden ist. Dadurch bleibt der Code wartbar, ohne dass bestimmte Browser auf aufdringliche CSS-Hacks zurückgreifen müssen.

Persönlich benutze ich ein Skript, um mit jQuery, einer Adaption von imgsizer, damit umzugehen . Da die meisten Designs, die ich jetzt verwende, die Breite% für Fluid-Layouts zwischen Geräten verwenden, gibt es eine geringfügige Anpassung an eine der Schleifen (wobei Größen berücksichtigt werden, 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;
}

BEARBEITEN: Möglicherweise interessieren Sie sich auch für jQuery CSS3 Finaliz [s] e .

Probieren Sie die Hintergrundgröße des Artikels aus . Wenn Sie alle folgenden Funktionen verwenden, funktioniert dies in den meisten Browsern mit Ausnahme von 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%;
} 

Derzeit nicht. Es wird in CSS 3 verfügbar sein , aber es wird einige Zeit dauern, bis es in den meisten Browsern implementiert ist.

.style1 {
        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;
}

Arbeitet in:

• Safari 3+
• Chrome Was auch immer +
• IE 9+
• Opera 10+ (Opera 9.5 unterstützt die Hintergrundgröße, jedoch nicht die Schlüsselwörter)
• Firefox 3.6+ (Firefox 4 unterstützt nicht vom Hersteller vorangestellte Versionen)

Darüber hinaus können Sie dies für eine dh Lösung versuchen

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

Dank an diesen Artikel von Chris Coyier http://css-tricks.com/perfect-full-page-background-image/

Mit einem Wort: nein. Die einzige Möglichkeit, ein Bild zu dehnen, ist mit dem<img> Tag. Du musst kreativ sein.

Dies war 2008 der Fall, als die Antwort geschrieben wurde. Heutzutage unterstützen moderne Browser, background-sizedie dieses Problem lösen. Beachten Sie, dass IE8 dies nicht unterstützt.

Definieren Sie "Stretch and Scale" ...

Wenn Sie ein Bitmap-Format haben, ist es im Allgemeinen nicht gut (grafisch gesehen), es zu dehnen und herumzuziehen. Sie können wiederholbare Muster verwenden, um die Illusion des gleichen Effekts zu erzeugen. Wenn Sie beispielsweise einen Farbverlauf haben, der am unteren Rand der Seite heller wird, verwenden Sie eine Grafik mit einer Breite von einem Pixel und der gleichen Höhe wie Ihr Container (oder vorzugsweise größer, um die Skalierung zu berücksichtigen) und kacheln Sie sie dann über den Seite. Wenn der Verlauf über die Seite verläuft, ist er ebenfalls ein Pixel hoch und breiter als Ihr Container und wird auf der Seite wiederholt.

Normalerweise machen Sie das Bild größer als den Behälter, um die Illusion zu erzeugen, dass es sich ausdehnt, um den Behälter zu füllen, wenn der Behälter wächst oder schrumpft. Überlappungen werden nicht außerhalb der Grenzen des Containers angezeigt.

Wenn Sie einen Effekt erzielen möchten, der auf einer Box mit gekrümmten Kanten beruht, kleben Sie die linke Seite Ihrer Box auf die linke Seite Ihres Containers mit einer ausreichenden Überlappung, die (innerhalb eines angemessenen Rahmens) unabhängig von der Größe des Containers niemals auftritt Wenn der Hintergrund ausgeht, überlagern Sie ein Bild der rechten Seite des Felds mit gekrümmten Kanten und positionieren es rechts vom Container. Wenn der Behälter schrumpft oder wächst, scheint der Effekt der gekrümmten Box mit ihm zu schrumpfen oder zu wachsen - tatsächlich nicht, aber es gibt die Illusion, dass genau das passiert.

Um das Bild wirklich verkleinern und mit dem Container wachsen zu lassen, müssten Sie einige Überlagerungstricks verwenden, damit das Bild als Hintergrund und Javascript als Größenänderung für den Container erscheint. Derzeit gibt es keine Möglichkeit, dies mit CSS zu tun ...

Wenn Sie Vektorgrafiken verwenden, liegen Sie leider weit außerhalb meines Fachgebiets.

Das habe ich daraus gemacht. In der Stretchklasse habe ich einfach die Höhe auf geändert auto. Auf diese Weise hat Ihr Hintergrundbild immer die gleiche Größe wie die Breite des Bildschirms und die Höhe hat immer die richtige Größe.

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

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

Fügen Sie eine background-attachmentZeile hinzu:

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

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

Ich möchte darauf hinweisen, dass dies gleichbedeutend ist mit:

html { width: 100%; height: 100%; }
body { width: 100%; height: 100%; /* Add background image or gradient to stretch here. */}

Eine weitere großartige Lösung hierfür ist Srobbins Backstretch, die auf den Körper oder ein beliebiges Element auf der Seite angewendet werden kann - http://srobbin.com/jquery-plugins/backstretch/

Versuche dies

http://jsfiddle.net/5LZ55/4/

body
{ 
    background: url(http://p1.pichost.me/i/40/1639647.jpg) no-repeat fixed; 
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}

Ein zusätzlicher Tipp für SolidSmiles Cheat ist das Skalieren (die proportionale Größenänderung) durch Festlegen einer Breite und Verwenden von Auto für die Höhe.

Ex:

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

Verwenden Sie die border-image : yourimageEigenschaft, um Ihr Bild festzulegen und bis zum gesamten Rand Ihres Bildschirms oder Fensters zu skalieren.