it-swarm.com.de

Wie kann ich ein GIF-Vollbild für den Hintergrund einer Webseite anzeigen?

Ich versuche, eine GIF an meinen gesamten Bildschirm anzupassen, aber bisher ist es nur ein kleines Quadrat, das sich auf meinem Bildschirm befindet, während der Rest weiß ist. Ich möchte jedoch, dass es den gesamten Platz einnimmt. 

Irgendwelche Ideen?

6
user3264048

wenn es Hintergrund ist, benutze background-size: cover;

Demo

background-image: url('source.gif');
background-size: cover;
13
Juan Castillo

IMG-Methode

Wenn das Bild ein eigenständiges Element sein soll, verwenden Sie dieses CSS:

#selector {
    width:100%;
    height:100%;
}

Mit diesem HTML:

<img src='folder/image.gif' id='selector'/>

Fiddle

Bitte beachten Sie, dass sich das img-Tag NUR im body-Tag befinden muss. Wenn es sich um etwas anderes handelt, füllt es möglicherweise nicht den gesamten Bildschirm aus, basierend auf den Eigenschaften der anderen Elemente. Diese Methode funktioniert auch nicht, wenn die Seite größer als das Bild ist. Es wird Leerstelle hinterlassen. Hier kommt die Hintergrundmethode ins Spiel 

Hintergrundbildmethode

Wenn Sie möchten, dass es das Hintergrundbild Ihrer Seite ist, können Sie dieses CSS verwenden:

body {
    background-image:url('folder/image.gif');
    background-size:100%;
    background-repeat: repeat-y;
    background-attachment: fixed;
    height:100%;
    width:100%;
}

Fiddle

Oder die Abkürzung:

body {
    background:url('folder/image.gif') repeat-y 100% 100% fixed;
    height:100%;
    width:100%;
}

Fiddle

9
zsaat14

Sie können einen Hintergrund mit Ihrer GIF-Datei einrichten und den Körper folgendermaßen einstellen:

body{
background-image:url('http://www.example.com/yourfile.gif');
background-position: center;
background-size: cover;
}

Ändern Sie die Hintergrundbild-URL mit Ihrer GIF. Mit background-position: center können Sie das Bild in die Mitte stellen und mit background-size: cover das Bild an den gesamten Bildschirm anpassen. Sie können auch background-size: contain einstellen, wenn Sie das Bild auf 100% des Bildschirms anpassen möchten, ohne einen Teil des Bildes zu verlassen, ohne zu zeigen.

Hier finden Sie weitere Informationen zur Immobilie:

http://www.w3schools.com/cssref/css3_pr_background-size.asp

Ich hoffe es hilft :)

1
davidlj95

In Ihrem CSS-Style-Tag fügen Sie Folgendes ein:

body {
  background: url('yourgif.gif') no-repeat center center fixed;
  background-size: cover;
}
0
Michael

wenn Sie es als Hintergrundbild und CSS3 verwenden möchten, wäre background-size: cover; der Trick

0
AJC

Dies sollte tun, was Sie suchen.

CSS:

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

.gif-container {
  background: url("image.gif") center;
  background-size: cover;

  height: 100%;
}

HTML:

<div class="gif-container"></div>
0
jonsuh