web-dev-qa-db-fra.com

Comment utiliser l'image d'arrière-plan réactif dans css3 dans bootstrap

Je ne veux pas utiliser la balise HTML. Ceci 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 lorsque je fais un zoom avant d'environ 180%, l'image sera courte de haut en bas, je veux quelques astuces en CSS. 

htmlcsscss3twitter-bootstrapbackground-image
46
Faizan

Pour une image de fond complète, vérifiez ceci:

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
fiskolin

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

Démo

Demo 2 (Ne vous étirez pas, c'est ce que vous faites)

Explication: Vous devez utiliser 100% 100% car il définit pour X SITUÉ Y, vous définissez 100% uniquement pour le paramètre X, ainsi l'arrière-plan ne s'étire pas verticalement.

Néanmoins, l’image s’étendra, elle ne réagira pas. Si vous souhaitez étirer la variable background proportionnellement, vous pouvez rechercher background-size: cover; mais IE créera des problèmes pour vous ici en tant que propriété CSS3, mais oui, vous peut utiliser CSS3 Pie en tant que polyfill. De plus, en utilisant cover, vous couperez votre image.

17
Mr. Alien

J'ai trouvé ça: 

Plein

Un modèle de fond d'image de page complète facile à utiliser pour les sites Web Bootstrap 3

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

ou

en utilisant 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
raduken

Regarde ça, 

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
Levent Divilioglu

Essaye ça:

body {
  background-image:url(img/background.jpg);
  background-repeat: no-repeat;
  min-height: 679px;
  background-size: cover;
}
1
user6060331

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

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

Si c'était le cas et que le fichier css avait un niveau inférieur dans son dossier respectif, le chemin d'accès à ip-box.jpg, tel que spécifié dans le fichier css, serait: '../images/ip-box.png'

1
wkille

Définir un arrière-plan réactif et convivial 

<style>
body {
background: url(image.jpg);
background-size:100%;
background-repeat: no-repeat;
width: 100%;
}
</style>
0
pradip kor