Wie strecke ich ein Hintergrundbild, um das gesamte HTML-Element abzudecken?

Ich versuche, ein Hintergrundbild eines HTML-Elements (body, div usw.) zu erhalten, um dessen gesamte Breite und Höhe zu strecken.

Ich habe nicht viel Glück. Ist es überhaupt möglich oder muss ich es anders machen, als als Hintergrundbild?

Mein aktuelles CSS ist:

body {
    background-position: left top;
    background-image: url(_images/home.jpg);
    background-repeat: no-repeat;
}

Danke im Voraus.

Bearbeiten: Ich bin nicht daran interessiert, das CSS in Gabriels Vorschlag beizubehalten, also ändere ich stattdessen das Layout der Seite. Aber das scheint die beste Antwort zu sein, also markiere ich es als solche.

<style>
    { margin: 0; padding: 0; }

    html { 
        background: url('images/yourimage.jpg') no-repeat center center fixed; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
</style>

Verwenden Sie die background-sizeEigenschaft: http://www.w3.org/TR/css3-background/#the-background-size

Kurz gesagt, Sie können dies versuchen ....

<div data-role="page" style="background:url('backgrnd.png'); background-repeat: no-repeat; background-size: 100% 100%;" >

Wo ich ein paar CSS und JS verwendet habe ...

<link rel="stylesheet" href="css/jquery.mobile-1.0.1.min.css" />
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/jquery.mobile-1.0.1.min.js"></script>

Und es funktioniert gut für mich.

Ich bin mir nicht sicher, ob das Strecken eines Hintergrundbilds möglich ist. Wenn Sie feststellen, dass dies nicht in allen Zielbrowsern möglich oder nicht zuverlässig ist, können Sie versuchen, ein gestrecktes img-Tag mit niedrigerem Z-Index und absoluter Position zu verwenden, damit andere Inhalte darüber angezeigt werden.

Lassen Sie uns wissen, was Sie am Ende tun.

Bearbeiten: Was ich vorgeschlagen habe, ist im Grunde, was in Gabriels Link ist. Also versuch das :)

Um die @ PhiLho-Antwort zu erweitern, können Sie ein sehr großes Bild (oder ein Bild beliebiger Größe) auf einer Seite zentrieren mit:

{ 
background-image: url(_images/home.jpg);
background-repeat:no-repeat;
background-position:center; 
}

Oder Sie können ein kleineres Bild mit einer Hintergrundfarbe verwenden, die dem Hintergrund des Bildes entspricht (wenn es einfarbig ist). Dies kann Ihren Zwecken entsprechen oder nicht.

{ 
background-color: green;
background-image: url(_images/home.jpg);
background-repeat:no-repeat;
background-position:center; 
}

Wenn Sie Ihr Hintergrundbild beim Ändern der Bildschirmgröße dehnen müssen und keine Kompatibilität mit älteren Browserversionen benötigen, ist dies die folgende Aufgabe:

body {
    background-image: url('../images/image.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}

Wenn Sie ein großes Querformat haben, wird in diesem Beispiel die Größe des Hintergrunds im Hochformat so geändert, dass er oben angezeigt wird und unten leer bleibt:

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

body {
    background-image: url('myimage.jpg');
    background-position-x: center;
    background-position-y: bottom;
    background-repeat: no-repeat;
    background-attachment: scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

@media screen and (orientation:portrait) {
    body {
        background-position-y: top;
        -webkit-background-size: contain;
        -moz-background-size: contain;
        -o-background-size: contain;
        background-size: contain;
    }
}

Den folgenden Code verwende ich hauptsächlich, um den gewünschten Effekt zu erzielen:

body {
    background-image: url('../images/bg.jpg');
    background-repeat: no-repeat;
    background-size: 100%;
}

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;

Sie können nicht in reinem CSS. Ein Bild, das die gesamte Seite hinter allen anderen Komponenten abdeckt, ist wahrscheinlich die beste Wahl (anscheinend ist dies die oben angegebene Lösung). Wie auch immer, die Chancen stehen gut, dass es sowieso schrecklich aussehen wird. Ich würde entweder versuchen, ein Bild zu erstellen, das groß genug ist, um die meisten Bildschirmauflösungen abzudecken (z. B. bis zu 1600 x 1200, darüber ist es knapper), die Breite der Seite zu begrenzen oder einfach ein Bild zu verwenden, das Kacheln enthält.

Bild{

background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  padding: 0 3em 0 3em; 
margin: -1.5em -0.5em -0.5em -1em; 
  width: absolute;
  max-width: 100%; 

Machen Sie einfach ein div zum direkten Kind des Körpers (zum Beispiel mit dem Klassennamen bg), der alle anderen Elemente im Körper umfasst, und fügen Sie dies der CSS-Datei hinzu:

.bg {
    background-image: url('_images/home.jpg');//Put your appropriate image URL here
    background-size: 100% 100%; //You need to put 100% twice here to stretch width and height
}

Siehe diesen Link: https://www.w3schools.com/css/css_rwd_images.asp Scrollen Sie nach unten zu dem Teil, der sagt:

2. Wenn die Eigenschaft für die Hintergrundgröße auf "100% 100%" festgelegt ist, wird das Hintergrundbild so ausgedehnt, dass es den gesamten Inhaltsbereich abdeckt

Dort wird die 'img_flowers.jpg' angezeigt, die sich auf die Größe des Bildschirms oder Browsers erstreckt, unabhängig davon, wie Sie die Größe ändern.

Für mich geht das

.page-bg {
  background: url("res://background");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}