Como mostrar um GIF fullscreen para um fundo de página web?

Estou a tentar fazer com que um GIF se encaixe no meu ecrã, mas até agora é apenas um pequeno quadrado que está no meu ecrã enquanto o resto é branco. No entanto, quero que ocupe todo o espaço.

Alguma ideia?

Author: K48, 2014-02-06

6 answers

Se For fundo, use background-size: cover;

Demonstração

background-image: url('source.gif');
background-size: cover;
 13
Author: Juan Castillo, 2016-07-14 16:16:09

Método IMG

Se quiser que a imagem seja um elemento autónomo, use este CSS:

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

Com este HTML:

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

Violino

Por favor, note que a etiqueta img teria de estar apenas dentro da etiqueta corporal. Se ele estava dentro de qualquer outra coisa, ele pode não preencher toda a tela com base nas propriedades de outros elementos. Este método também não funcionará se a página for mais alta do que a imagem. Vai deixar espaço branco. É aqui que a o método de fundo aparece em

Método Da Imagem De Fundo

Se quiser que seja a imagem de fundo da sua página, pode usar este CSS:

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

Violino

Ou a versão abreviada:

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

Violino

 8
Author: zsaat14, 2014-02-05 23:20:39

Você pode configurar um fundo com o seu ficheiro GIF e definir o corpo desta forma:

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

Mude o URL de fundo da imagem com o seu GIF. Com background-position: center você pode colocar a imagem no centro e com {[2] } Você define a imagem para caber toda a tela. Você também pode definir background-size: contain Se você quiser ajustar a imagem a 100% do ecrã, mas sem deixar qualquer parte da imagem sem mostrar.

Aqui está mais informação sobre o propriedade:

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

Espero que ajude.
 1
Author: davidlj95, 2014-02-05 22:58:21

Se você está feliz usando-o como uma imagem de fundo e CSS3 então background-size: cover; faria o truque

 0
Author: AJC, 2014-02-05 22:56:12
Isto deve fazer o que procuras.

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
Author: jonsuh, 2014-02-05 22:58:13

Na sua marca de estilo CSS coloque isto:

body {
  background: url('yourgif.gif') no-repeat center center fixed;
  background-size: cover;
}
 0
Author: Michael, 2017-08-20 14:58:22