Comment faire un fond d'écran plein dans une page Web

Comment faire une image comme fond de page web, quelle que soit la taille de l'écran de l'affichage de cette page web? Je veux l'afficher correctement. Comment?

source d'informationauteur Adham

  2. 22

    très simple
    utilisez cette css (remplacer image.jpg avec votre image d'arrière-plan)

    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')";
}
  3. 17

    de messagerie unifiée, pourquoi ne pas juste mettre une image à la couche de fond et de renoncer à tous les désagréments

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

    Utiliser CSS pour faire le plein écran backgound 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;
}
  5. 0

    Faire un div en 100% de largeur et de 100% de haut. Définir une image d'arrière-plan.

  6. 0

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

    En gardant l'image petites et reproductiblevous n'aurez pas de problèmes avec le chargement sur des appareils mobiles et la petite image de taille de fichier prend soin de soucis de mémoire.

    Voici le balisage de la head section:

    <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 doit préserver ratio d'aspectcomme les personnes ou les objets, puis vous ne voulez pas 100% pour la largeur et la hauteur depuis qui permet d'étirer l'image hors de proportion. Au lieu de vérifier cette tutoriel rapide qui montre les différentes méthodes pour appliquer des images d'arrière-plan à l'aide de CSS.

  7. 0

    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>