web-dev-qa-db-fra.com

Comment afficher un gif en plein écran pour un fond de page Web?

J'essaie de faire correspondre un GIF à tout mon écran, mais jusqu'à présent, il ne s'agit que d'un petit carré qui est sur mon écran, le reste étant blanc. Cependant, je veux qu'il prenne toute la place. 

Des idées?

htmlcssgif
6
user3264048

si c'est le fond, utilisez background-size: cover;

démo

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

Méthode IMG

Si vous voulez que l'image soit un élément autonome, utilisez ce CSS:

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

Avec ce HTML:

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

Fiddle

Veuillez noter que la balise img doit être à l'intérieur de la balise body UNIQUEMENT. S'il se trouvait à l'intérieur de quelque chose d'autre, il pourrait ne pas remplir tout l'écran en fonction des propriétés des autres éléments. Cette méthode ne fonctionnera pas non plus si la page est plus haute que l’image. Il va laisser un espace blanc. C’est là que la méthode d’arrière-plan intervient 

Méthode de l'image de fond

Si vous voulez que ce soit l'image de fond de votre page, vous pouvez utiliser ce CSS:

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

Fiddle

Ou la version abrégée:

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

Fiddle

9
zsaat14

Vous pouvez configurer un arrière-plan avec votre fichier GIF et définir le corps de la manière suivante:

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

Modifier l'URL de l'image d'arrière-plan avec votre GIF. Avec background-position: center, vous pouvez placer l'image au centre et avec background-size: cover, vous définissez l'image pour qu'elle s'adapte à tout l'écran. Vous pouvez également définir background-size: contain si vous souhaitez ajuster l'image à 100% de l'écran mais sans laisser aucune partie de l'image sans la visualiser.

Voici plus d'informations sur la propriété:

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

J'espère que ça aide :)

1
davidlj95

Dans votre balise de style CSS, mettez ceci:

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

si vous êtes heureux de l'utiliser comme image de fond et CSS3, alors background-size: cover; ferait l'affaire

0
AJC

Cela devrait faire ce que vous cherchez.

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