Hoe een GIF weergeven Fullscreen voor een webpagina-achtergrond?

Ik probeer een gif te maken fit mijn hele scherm, maar tot nu toe is het slechts een klein vierkant dat op mijn scherm staat terwijl de rest wit is. Ik wil echter dat het alle ruimte opneemt.

alle ideeën?


Antwoord 1, Autoriteit 100%

Als de achtergrond is, gebruik dan background-size: cover;

body{
    background-image: url('https://i.stack.imgur.com/kx8MT.gif');
    background-size: cover;
    height: 100vh;
    padding:0;
    margin:0;
}

Antwoord 2, Autoriteit 34%

IMG-methode

Als u wilt dat de afbeelding een stand-alone element is, gebruikt u deze CSS:

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

Met deze HTML:

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

fiddle

Houd er rekening mee dat de IMG-tag alleen in het lichaamstag moet zijn. Als het in iets anders was, vult het mogelijk het volledige scherm mogelijk niet op basis van de andere elementeneigenschappen. Deze methode werkt ook niet als de pagina groter is dan de afbeelding. Het zal witte ruimte achterlaten. Hier komt de achtergrondmethode in

achtergrondafbeeldingsmethode

Als u wilt dat het de achtergrondafbeelding van u pagina is, kunt u deze CSS gebruiken:

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

Fiddle

of de steno-versie:

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

Fiddle


Antwoord 3, Autoriteit 3%

U kunt een achtergrond instellen met uw GIF-bestand en het lichaam op deze manier instellen:

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

Wijzig achtergrondafbeelding-URL met uw GIF. Met background-position: centerU kunt het beeld plaatsen op het midden en met background-size: coverU stelt de afbeelding in om het scherm te passen. U kunt ook background-size: containAls u op de afbeelding op 100% van het scherm wilt plaatsen, maar zonder een deel van de afbeelding te verlaten zonder te laten zien.

Hier is meer informatie over het pand:

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

Ik hoop dat het helpt 🙂


Antwoord 4

Als u gelukkig bent als een achtergrondafbeelding en CSS3 dan background-size: cover;zou de truc


Antwoord 5

Dit zou moeten doen waarnaar u op zoek bent.

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>

Antwoord 6

Plaats dit in je CSS Style-tag:

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

Other episodes