it-swarm.com.de

CSS-Bilder im Hintergrund strecken und skalieren - nur mit CSS

Ich möchte, dass mein Hintergrundbild je nach Größe des Browser-Ansichtsfensters vergrößert und verkleinert wird.

Ich habe einige Fragen zu Stack Overflow gesehen, die diese Aufgabe erfüllen, wie zum Beispiel CSS-Hintergrund dehnen und skalieren. Es funktioniert gut, aber ich möchte das Bild mit background platzieren, nicht mit einem img -Tag.

In diesem wird ein img -Tag platziert, und dann wird mit CSS das img -Tag gewürdigt.

width:100%; height:100%;

Es funktioniert, aber diese Frage ist ein bisschen alt und besagt, dass das Ändern der Größe eines Hintergrundbilds in CSS 3 ziemlich gut funktioniert. Ich habe es versucht Beispiel das erste , aber es hat für mich nicht geklappt.

Gibt es eine gute Methode, um dies mit der background-image -Deklaration zu tun?

813
Fábio Antunes

CSS3 hat ein nettes kleines Attribut namens background-size:cover.

Dadurch wird das Bild so skaliert, dass der Hintergrundbereich vollständig vom Hintergrundbild bedeckt 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.

1004
Vashishtha Jogi

Sie könnten die CSS3-Eigenschaft verwenden, um es ganz nett zu machen. Die Größe wird so angepasst, dass keine Bildverzerrung auftritt (obwohl kleine Bilder vergrößert werden). Beachten Sie nur, dass es noch nicht in allen Browsern implementiert ist.

background-size: 100%;
461
Matt Burgess

Mit dem Code erwähnte ich ...

HTML

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

CSS

#background {
    width: 100%; 
    height: 100%; 
    position: fixed; 
    left: 0px; 
    top: 0px; 
    z-index: -1; /* Ensure div tag stays behind content; -999 might work, too. */
}

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

Das erzeugt den gewünschten Effekt: Nur der Inhalt wird gescrollt, nicht der Hintergrund.

Das Hintergrundbild wird für jede Bildschirmgröße in der Größe des Browser-Ansichtsfensters angepasst. Wenn der Inhalt nicht zum Browser-Ansichtsfenster passt und der Benutzer die Seite scrollen muss, bleibt das Hintergrundbild im Ansichtsfenster fixiert, während der Inhalt gescrollt wird.

Mit CSS 3 scheint dies viel einfacher zu sein.

183
Fábio Antunes

CSS:

html,body {
    background: url(images/bg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover; /* For WebKit*/
    -moz-background-size: cover;    /* Mozilla*/
    -o-background-size: cover;      /* Opera*/
    background-size: cover;         /* Generic*/
}
162
user742030
background-size: 100% 100%; 

streckt den Hintergrund, um das gesamte Element auf beiden Achsen auszufüllen.

48
yeahdixon

Der folgende CSS-Teil sollte das Bild mit allen Browsern dehnen.

Ich mache das dynamisch für jede Seite. Daher benutze 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'.

<html style="
      background: url(images/'.$pic.'Bg.jpg) no-repeat center center fixed;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/'.$pic.'Bg.jpg\',     sizingMethod=\'scale\');
      -ms-filter: \"progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/'.$pic.'Bg.jpg\', sizingMethod=\'scale\')\
";>

Wenn Sie nur ein Hintergrundbild für alle Seiten haben, können Sie die Variable $pic entfernen, entstehende Schrägstriche entfernen, Pfade anpassen und diesen Code in Ihre CSS-Datei einfügen.

html{
    background: url(images/homeBg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/homeBg.jpg',     sizingMethod='scale');
    -ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/homeBg', sizingMethod='scale');
}

Dies wurde mit Internet Explorer 9, Chrome 21 und Firefox 14 getestet.

39

Verwenden Sie dieses CSS:

background: url('img.png') no-repeat; 
background-size: 100%;
17
RSH1

Mit dem img-Tag können Sie den gleichen Effekt erzielen wie mit einem Hintergrundbild. Sie müssen lediglich den Z-Index niedriger als alles andere einstellen, die Position absolut festlegen und für jedes Feld im Vordergrund einen transparenten Hintergrund verwenden.

17
Kim Stebel

Sie können diese Klasse in Ihre CSS-Datei einfügen.

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

Es funktioniert in:

  • Safari 3 oder höher
  • Chrome Was auch immer oder später
  • Internet Explorer 9 oder höher
  • Opera 10 oder höher (Opera 9.5 unterstützt background-size, aber nicht die Schlüsselwörter)
  • Firefox 3.6 oder höher (Firefox 4 unterstützt eine vom Hersteller vorgegebene Version)
14
Arunraj S

Es wird durch CSS-Tricks erklärt: Perfect Full Page Background Image

Demo: https://css-tricks.com/examples/FullPageBackgroundImage/progressive.php

Code:

body {
  background: url(images/myBackground.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
14
Aamer Shahzad

Verwenden Sie Folgendes, um Ihre Bilder entsprechend der Containergröße zu skalieren:

background-size: contain;
background-repeat: no-repeat;
10
justinpees

Ich benutze dies und es funktioniert mit allen Browsern:

<html>
    <head>
        <title>Stretched Background Image</title>
        <style type="text/css">
            /* Remove margins from the 'html' and 'body' tags, and ensure the page takes up full screen height. */
            html, body {height:100%; margin:0; padding:0;}

            /* Set the position and dimensions of the background image. */
            #page-background {position:fixed; top:0; left:0; width:100%; height:100%;}

            /* Specify the position and layering for the content that needs to appear in front of the background image. Must have a higher z-index value than the background image. Also add some padding to compensate for removing the margin from the 'html' and 'body' tags. */
            #content {position:relative; z-index:1; padding:10px;}
        </style>
        <!-- The above code doesn't work in Internet Explorer 6. To address this, we use a conditional comment to specify an alternative style sheet for IE 6. -->
        <!--[if IE 6]>
        <style type="text/css">
            html {overflow-y:hidden;}
            body {overflow-y:auto;}
            #page-background {position:absolute; z-index:-1;}
            #content {position:static;padding:10px;}
        </style>
        <![endif]-->
    </head>
    <body>
        <div id="page-background"><img src="http://www.quackit.com/pix/milford_sound/milford_sound.jpg" width="100%" height="100%" alt="Smile"></div>
        <div id="content">
            <h2>Stretch that Background Image!</h2>
            <p>This text appears in front of the background image. This is because we've used CSS to layer the content in front of the background image. The background image will stretch to fit your browser window. You can see the image grow and shrink as you resize your browser.</p>
            <p>Go on, try it - resize your browser!</p>
        </div>
    </body>
</html>
9
Mahdi jokar

Vielen Dank!

Aber dann funktionierte es nicht für die Browser Google Chrome und Safari (Dehnung funktionierte, aber die Höhe der Bilder betrug nur 2 mm !) , bis mir jemand gesagt hat, was fehlt:

Versuche height:auto;min-height:100%; zu setzen

Also ändere das für deine height:100%; Zeile, ergibt:

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

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

Kurz vor diesem neu hinzugefügten Code habe ich dies in meinen DrupalTend Themes style.css:

html, body {height: 100%;}

# page {background: #ffffff; Höhe: auto! wichtig; Höhe: 100%; min-Höhe: 100%; Position: relativ;}

Dann muss ich innerhalb von Drupal einen neuen Block mit dem Bild erstellen, während ich class=stretch hinzufüge:

<img alt = "" class = "stretch" src = "pic.url" />

Das Kopieren eines Bildes mit dem Editor in diesem Drupal -Block funktioniert nicht. man muss den Editor auf nicht formatierten Text umstellen.

8
Cybr

Ich stimme dem Bild in absoluten Div mit 100% Breite und Höhe. Stellen Sie sicher, dass Sie 100% Breite und Höhe für den Body im CSS festlegen und Ränder und Abstände auf Null setzen. Ein weiteres Problem bei dieser Methode ist, dass der Auswahlbereich beim Auswählen von Text manchmal das Hintergrundbild umfasst, was den unglücklichen Effekt hat, dass die gesamte Seite den ausgewählten Status aufweist. Sie können dies umgehen, indem Sie die user-select:none CSS-Regel wie folgt verwenden:

<html>
    <head>
        <style type="text/css">

            html,body {
                height: 100%;
                width: 100%
                margin: none;
                padding: none;
            }

            #background {
                width: 100%;
                height: 100%;
                position: fixed;
                left: 0px;
                top: 0px;
                z-index: -99999;
                -webkit-user-select: none;
                -khtml-user-select: none;
                -moz-user-select: none;
                -o-user-select: none;
                user-select: none;
            }

            #background img {
                width: 100%;
                height: 100%;
            }

            #main{ z-index:10;}
        </style>
    </head>
    <body>
        <div id="main">
            content here
        </div>
        <div id="background"><img src="bg.jpg"></div>
    </body>
</html>

Auch hier ist der Internet Explorer der Bösewicht, da er die vom Benutzer gewählte Option nicht erkennt - nicht einmal Internet Explorer 1 die Vorschau unterstützt, sodass Sie die Option haben, entweder JavaScript zu verwenden, um den Hintergrund zu verhindern Bildauswahl (zum Beispiel http://www.felgall.com/jstip35.htm ) oder mit CSS Hintergrund-Stretch-Methode.

Auch für SEO würde ich das Hintergrundbild am unteren Rand der Seite platzieren, aber wenn das Laden des Hintergrundbilds zu lange dauert (dh mit einem weißen Hintergrund anfangs), könnten Sie sich bewegen zum Anfang der Seite.

8
Myke Black

Ich wollte ein Hintergrundbild zentrieren und skalieren, ohne es auf die gesamte Seite auszudehnen, und ich wollte, dass das Seitenverhältnis beibehalten wird. Dies funktionierte für mich dank der Variationen, die in anderen Antworten vorgeschlagen wurden:

INLINE-BILD: ------------------------

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

CSS ----------------------------------

html {
    height:100%;
}

#background {
    text-align: center;
    width: 100%; 
    height: 100%; 
    position: fixed;
    left: 0px; 
    top: 0px; 
    z-index: -1;
}

.stretch {
    margin: auto;
    height:100%;
}
7
AnnieDee

Verwenden Sie das Backstretch Plugin. Man könnte sogar mehrere Bilder schieben. Es funktioniert auch in Containern. Auf diese Weise könnte beispielsweise nur ein Teil des Hintergrunds mit einem Hintergrundbild bedeckt sein.

Da ich es sogar zum Laufen bringen konnte, ist es ein einfach zu verwendendes Plugin :).

4
Daniel

Ich habe eine Kombination der background-X CSS-Eigenschaften verwendet, um das ideale Hintergrundbild für die Skalierung zu erhalten.

background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;

Dadurch bedeckt der Hintergrund immer das gesamte Browserfenster und bleibt beim Skalieren zentriert.

4
Ryan Den-Kaat

Wenn Sie den Inhalt horizontal zentrieren möchten, verwenden Sie eine Kombination wie die folgende:

background-repeat: no-repeat;
background-size: cover;
background-position: center;

Das wird schön aussehen.

3
Samuel Ramzan

Verwenden Sie dieses CSS:

background-size: 100% 100%

2
shady sherif

Mit der Eigenschaft border-image : yourimage können Sie das Bild bis zum Rand skalieren. Auch wenn Sie das Hintergrundbild angeben, wird das Rahmenbild darüber gezeichnet.

Die _border-image_ -Eigenschaft ist sehr nützlich, wenn Ihr Stylesheet an einem Ort implementiert ist, der CSS 3 nicht unterstützt. Wenn Sie Google Chrome oder Firefox verwenden, empfehle ich die _background-size:cover_ -Eigenschaft selbst.

1
Natesh bhat

Möchten Sie dies nur mit einem Bild erreichen? Denn mit zwei Bildern kann man tatsächlich etwas Ähnliches an einem sich streckenden Hintergrund machen. PNG Bilder zum Beispiel.

Ich habe das schon mal gemacht und es ist nicht so schwer. Außerdem würde Dehnen meiner Meinung nach nur die Qualität des Hintergrunds beeinträchtigen. Und wenn Sie ein großes Bild hinzufügen, werden langsame Computer und Browser langsamer.

0
MarioRicalde