web-dev-qa-db-fra.com

Comment créer un fond plein écran dans une page Web

Comment créer une image en tant qu'arrière-plan de page Web, quelle que soit la taille de l'écran affichant cette page Web? Je veux l'afficher correctement. Comment?

htmlcssweb
10
Adham

Via les plugins jQuery;)

4
doptrois

son très simple utilisez ce css (remplacez image.jpg par votre image de fond)

body{height:100%;
   width:100%;
   background-image:url(image.jpg);/*your background image*/  
   background-repeat:no-repeat;/*we want to have one single image not a repeated one*/  
   background-size:cover;/*this sets the image to fullscreen covering the whole screen*/  
   /*css hack for ie*/     
   filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.image.jpg',sizingMethod='scale');
   -ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.jpg',sizingMethod='scale')";
}
23
Shivam

euh pourquoi ne pas simplement définir une image sur la couche inférieure et renoncer à tous les inconvénients

<img src='yourmom.png' style='position:fixed;top:0px;left:0px;width:100%;height:100%;z-index:-1;'>
19
str8

Utilisez ce CSS pour créer un arrière-plan plein écran dans une page Web.

body {
    margin:0;
    padding:0;
    background:url("https://static.vecteezy.com/system/resources/previews/000/106/719/original/vector-abstract-blue-wave-background.jpg") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
2
Muneeb Siddiqui

Utilisez le code suivant dans votre CSS

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
voici le lien où je l’ai trouvé:

1
Arvind Shokal

Une recherche rapide de mots-clés générateur de fond montre ce motif de fond créé par CSS3 et créé dynamiquement.

En conservant l'image petite et reproductible, vous n'aurez pas de problème de chargement sur les appareils mobiles et la petite taille de fichier image prend en charge les problèmes de mémoire.

Voici le balisage pour la section head:

<style type="text/css">

    body {
      background-image:url('path/to/your/image/background.png');
      width: 100%;
      height: 100%;
    }

</style>

Si vous allez utiliser une image de quelque chose qui devrait conserver le rapport d'aspect, telle que des personnes ou des objets, alors vous ne voulez pas de 100% pour la largeur et la hauteur car cela dilaterait l'image . Au lieu de cela, consultez ce tutoriel rapide qui montre différentes méthodes pour appliquer des images d’arrière-plan à l’aide de CSS.

0
arttronics

CSS

.bbg { 
    /* The image used */
    background-image: url('...');

    /* Full height */
    height: 100%; 

    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;    
}

HTML

<!doctype html>
<html class="h-100">
.
.
.
<body class="bbg">
</body>
.
.
.
</html>
0
Hayd

Faites un div 100% large et 100% haut. Ensuite, définissez une image de fond.

0
dotty