web-dev-qa-db-fra.com

Twitter Bootstrap Responsive Background-Image dans Div

Comment je peux modifier l'image #bg afin qu'elle soit réactive, redimensionnable et proportionnelle dans tous les navigateurs?

HTML:

 <div class="container">
       <div class="row">
          <div class="col-md-2"></div>

            <div class="col-md-8 col-sm-6 col-xs-12 well" id="bg">

               </div>

            <div class="col-md-2"></div>
       </div>
  </div>

css:

@import url('bootstrap.min.css');

body{
    background: url('../img/bg.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    margin-top: 12%;    
}

#bg{
    background:url('../img/con_bg4.png') no-repeat center center;
    height: 500px;
}
htmlcsscss3twitter-bootstraptwitter-bootstrap-3
59
vkatsitadze

J'ai trouvé une solution.

background-size:100% auto;
79
vkatsitadze

Vous pourriez aussi essayer:

background-size: cover;

Il existe de bons articles à lire sur l’utilisation de cette propriété CSS3: P erfect Image de fond de page complète par CSS-Tricks et CSS Background-Size de David Walsh .

VEUILLEZ NOTER - Cela ne fonctionnera pas avec IE8-. Cependant, cela fonctionnera sur la plupart des versions de Chrome, Firefox et Safari.

24
doodelicious

Essayez ceci (s’applique à une classe dans laquelle votre image se trouve (pas img elle-même), par exemple.

.myimage {
  background: transparent url("yourimage.png") no-repeat top center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: 100%;
  height: 500px;
}
7
Jowita Emberton

Je crois que cela devrait aussi faire le travail aussi:

background-size: contain;

Il spécifie que l'image doit être redimensionnée pour tenir dans l'élément sans perdre ses proportions.

6
KevinAdu

J'ai eu le même problème et je l'ai résolu en utilisant:

background:url(images/banner1.png) no-repeat center top scroll;
background-size: 100% auto;
padding-bottom: 50%;

... ici je devais ajouter le padding: 50% car cela ne fonctionnait pas pour moi autrement. Cela m'a permis de définir la hauteur du conteneur en fonction du rapport de taille de mon image de bannière . et il est également sensible dans mon cas.

6
Mashhood

Cela devrait marcher

background: url("youimage.png") no-repeat center center fixed;
-webkit-background-size: 100% auto;
-moz-background-size: 100% auto;
-o-background-size: 100% auto;
 background-size: 100% auto;
1
Jay

Pour ce faire, utilisez background-size, dans votre cas:

background-size: 50% 50%;

ou

Vous pouvez également définir la largeur et la hauteur des éléments en pourcentages.

1
Hive7

Ne pas utiliser fixe:

.myimage {
   background:url(admin-user-bg.png) no-repeat top center;
   background: transparent url("yourimage.png") no-repeat top center fixed;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: 100%;
   height: 500px;
}
1
RayKech

Mby bootstrap img-responsive la classe que vous recherchez.

1
Dzintars