Comment faire pour afficher un gif mode plein écran pour un arrière-plan de la page web?

Je suis en train de faire un GIF fit tout mon écran, mais pour l'instant c'est juste un petit carré qui se trouve sur mon écran, tout le reste est blanc. Cependant, je tiens à occuper tout l'espace.

Des idées?

Double de stackoverflow.com/questions/376253/... ?

OriginalL'auteur user3264048 | 2014-02-05

9

IMG Méthode

Si vous voulez que l'image soit d'un seul élément, utilisez ce CSS:
```
#selector {
    width:100%;
    height:100%;
}
```
Avec ce code HTML:
```
<img src='folder/image.gif' id='selector'/>
```
Violon

Veuillez noter que la balise img devrait être à l'intérieur de la balise body. Si c'était à l'intérieur de quelque chose d'autre, il ne peut pas remplir la totalité de l'écran sur la base des autres éléments de propriétés. Cette méthode ne fonctionnera pas si la page est plus grand que l'image. Il va laisser un espace blanc. C'est là le fond de la méthode vient en

Image D'Arrière-Plan De La Méthode

Si vous voulez qu'il 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%;
}
```
Violon

Ou la version courte:
```
body {
    background:url('folder/image.gif') repeat-y 100% 100% fixed;
    height:100%;
    width:100%;
}
```
Violon

aurais-je img src mon gif pour l'ajouter?
Voir modifier. Il y a de multiples façons d'aborder cette.
cela fonctionne, mais il ne prend pas la totalité de l'écran
Définir "ne prenez pas le plein écran" pour moi. Je suis en train de travailler sur certains des violons, maintenant, alors que des manifestations.
Le gif est sur le côté droit de mon écran, comme un support de la taille d'un rectangle.

OriginalL'auteur zsaat14
1

Vous pouvez mettre en place un fond avec votre fichier GIF et définir le corps de cette façon:
```
body{
background-image:url('http://www.example.com/yourfile.gif');
background-position: center;
background-size: cover;
}
```
Changer l'image de fond d'URL avec votre GIF. Avec background-position: center vous pouvez mettre l'image du centre et avec background-size: cover vous réglez l'image pour s'adapter à tous l'écran. Vous pouvez également définir background-size: contain si vous souhaitez adapter l'image à 100% de l'écran, mais sans laisser aucune partie de l'image sans la montrer.

Voici plus d'informations à propos de la propriété:

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

Espère que cela aide 🙂

MDN est beaucoup plus fiable que w3schools.
Merci @zsaat14! Je ne savais pas MDN avait que guide de référence! Je vais mettre en signet 🙂
ne prend pas en plein écran
Vérifier si l'ajout de width:100% et height:100% à body œuvres

OriginalL'auteur davidlj95
0

si vous êtes heureux de l'utiliser comme image d'arrière-plan et CSS3 puis background-size: cover; ferait l'affaire

OriginalL'auteur AJC

Ceci 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>

OriginalL'auteur jonsuh

Dans votre feuille de Style CSS de la balise de mettre ceci:

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

OriginalL'auteur Michael

Vous devez vous connecter pour publier un commentaire.