web-dev-qa-db-fra.com

Bootstrap responsive image d'arrière-plan

Comment créer, en utilisant bootstrap, un détenteur de div ayant comme arrière-plan une image adaptée à l'affichage des visiteurs? L'image a une hauteur et une largeur fixes. Si l'écran est plus petit doit être redimensionné pour ne pas avoir x, y débordement.

css3twitter-bootstrapresponsive-design
16
kakuki

Vous pouvez utiliser background-size comme ceci:

div.someclass {
  background-size: cover;
}

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

24
pzin

Je ne suis pas très expérimenté dans Bootstrap, mais je pense qu’il n’existe pas une telle fonctionnalité. Je vous recommande de créer votre propre "thème Bootstrap", un fichier CSS pur ou moins pour personnaliser votre arrière-plan.

Vous pouvez simplement utiliser:

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

Ce code étend l’image d’arrière-plan dans les deux dimensions, mais coupe certaines parties de l’image, sauf si le rapport de l’écran est identique au rapport de l’image.

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

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 l’image d’arrière-plan sensible, c’est-à-dire qu’elle s’adaptera à la taille de l’affichage sur lequel la page est affichée.

Deuxièmement, garder le contenu du formulaire principal avec une marge appropriée en haut sur tout périphérique revient à donner au div que vous venez de créer pour le contenu principal une marge relative par dessus:

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

changez les 5% ci-dessus en fonction de vos besoins.

1
Pranav Pandey

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%;

    }
0
Deepak Shinde