Como mostrar um GIF fullscreen para um fundo de página web?
6 answers
Se For fundo, use background-size: cover;
background-image: url('source.gif');
background-size: cover;
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'/>
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%;
}
Ou a versão abreviada:
body {
background:url('folder/image.gif') repeat-y 100% 100% fixed;
height:100%;
width:100%;
}
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.
Se você está feliz usando-o como uma imagem de fundo e CSS3 então background-size: cover;
faria o truque
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>
Na sua marca de estilo CSS coloque isto:
body {
background: url('yourgif.gif') no-repeat center center fixed;
background-size: cover;
}