webentwicklung-frage-antwort-db.com.de

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

Ich versuche, ein Hintergrundbild eines HTML-Elements (body, div usw.) zu erstellen, 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 es ein Hintergrundbild ist?

Mein aktueller 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 sie als solche.

85
Fung
<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>
184
Nathan

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

14
Kornel

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 benutzt 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.

8
Tamal Samui

Nicht sicher, ob ein Hintergrundbild gedehnt werden kann. 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 einem niedrigeren Z-Index und einer absoluten Position zu verwenden, sodass 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 mal :)

6
Travis Collins

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

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

Sie können auch ein kleineres Bild mit einer Hintergrundfarbe verwenden, die dem Hintergrund des Bildes entspricht (sofern es sich um eine Volltonfarbe handelt). Dies kann Ihren Zwecken entsprechen oder auch nicht.

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

Wenn Sie Ihr Hintergrundbild strecken müssen, während Sie die Größe des Bildschirms ändern, und keine Kompatibilität mit älteren Browserversionen benötigen, wird dies die Arbeit erledigen:

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

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%;
}
3
Badar

Wenn Sie ein großes Querformat haben, wird in diesem Beispiel der Hintergrund im Hochformat so angepasst, 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;
    }
}
3
live-love
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;
2

In reinem CSS geht das nicht. 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 aussieht. 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), oder die Breite der Seite zu begrenzen, oder einfach ein Bild zu verwenden, das kachelt.

0
PhiLho