Comment utiliser l'image de fond responsive dans CSS3 dans bootstrap

Je ne veux pas utiliser de balise html. C'est mon css. J'utilise bootstrap 3.0.

background:url('images/ip-box.png')no-repeat;
background-size:100%;
height: 140px;
display:block;
padding:0 !important;
margin:0;

Sur 100% zoom c'est OK. mais quand je zoome à 180% environ, l'image sera courte de haut en bas, je veux quelques trucs css.

45
demandé sur Mr. Alien 2013-09-04 15:30:20

7 réponses

pour une image complète, cochez cette case:

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;
}
69
répondu fiskolin 2013-09-04 11:34:04

Vous devez utiliser background-size: 100% 100%;

Démo

Démo 2 (ne s'étire pas, c'est ce que vous faites)

Explication: Vous devez utiliser 100% 100% pour les X AINSI QUE Y, vous êtes paramètre 100% juste pour le , donc le fond ne s'étire pas verticalement.

Encore, l'image va s'étirer, il de ne pas être sensible, si vous voulez étirer le background proportionnellement, vous pouvez chercher background-size: cover; mais IE va créer des problèmes pour vous ici car c'est une propriété CSS3, mais oui, vous pouvez utiliser CSS3 Pie comme un polyfill. Aussi, à l'aide de cover recadrer votre image.

17
répondu Mr. Alien 2013-09-04 11:35:32

j'ai trouvé ceci:

un modèle d'image d'arrière-plan facile à utiliser pour Bootstrap 3 sites web

http://startbootstrap.com/template-overviews/full/

ou

utilisation dans votre conteneur div principal:

html

<div class="container-fluid full">


</div>

css:

.full {
    background: url('http://placehold.it/1920x1080') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    height:100%;
}
9
répondu raduken 2016-06-13 15:10:51

Check this out,

body {
    background-color: black;
    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;
}
4
répondu Levent Divilioglu 2015-12-31 15:39:57

le chemin du fichier 'images/ip-box.png' implique que le css le fichier est au même niveau que les images dossier.

il est probablement plus courant d'avoir des dossiers 'images' et 'css' au même niveau que l'index.html fichier.

si c'était le cas et que le fichier css était un niveau en bas dans son dossier respectif, alors le chemin vers ip-box.jpg comme spécifié dans le fichier css serait: '../images/ip-box.png'

1
répondu wkille 2016-01-13 12:01:20

essaye ceci:

body {
  background-image:url(img/background.jpg);
  background-repeat: no-repeat;
  min-height: 679px;
  background-size: cover;
}
1
répondu RiggsFolly 2017-10-18 10:22:35

Définir Réactif et convivial d'arrière-plan 

<style>
body {
background: url(image.jpg);
background-size:100%;
background-repeat: no-repeat;
width: 100%;
}
</style>
0
répondu pradip kor 2017-07-20 11:51:04