Image d'arrière-plan réactive Bootstrap

Comment puis-je faire, à l'aide de bootstrap, un div titulaire ayant comme arrière-plan d'une image afin de l'adapter aux visiteurs d'affichage? L'image a une fixe en hauteur et en largeur. Si l'écran est plus petit doit être redimensionnée pour ne pas avoir x,y débordement.

source d'informationauteur kakuki

  1. 23

    Vous pouvez utiliser background-size comme ceci:

    div.someclass {
  background-size: cover;
}

    Il y a un bon article de @Chris Coyier montrer quelques techniques: http://css-tricks.com/perfect-full-page-background-image/

  2. 1
    body {
    background="imagename.jpg";
    }
  3. 0

    Je ne suis pas très expérimenté dans le Bootstrap, mais je pense qu'il n'y a pas une telle caractéristique. Je vous recommande de créer votre propre "Bootstrap Thème", un pur CSS ou MOINS de fichiers pour personnaliser votre fond.

    Vous pouvez simplement utiliser:

    body
{
    background: url(https://www.google.hu/images/srpr/logo4w.png);
    background-size: cover;
}

    Ce code s'étend de votre image d'arrière-plan en deux dimensions, mais il coupe certaines parties de l'image, à moins que l'écran de la ration est le même que le rapport de l'image.

    body
{
    background: url(https://www.google.hu/images/srpr/logo4w.png) no-repeat center center fixed;
    background-size: cover;
}
  4. 0

    Cela a fonctionné pour moi:

    body{
        background-image: url('../url') ;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        height:100%;

    }
  5. 0

    Tout d'abord, pour l'image de fond:

    div.someclass{ 
 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;
}

    Cela rendra votre image d'arrière-plan responsive, c'est à dire qu'il s'adaptera en fonction de la taille de l'affichage de la page est affichée.

    Deuxième, pour garder la forme principale du contenu d'une bonne marge de dessus sur n'importe quel appareil est de donner de la div que vous venez de créer pour le contenu principal d'un parent de la marge du haut:

    div.someclass{
 margin-top:5%;
}

    changer la au-dessus de 5%, selon vos besoins.