web-dev-qa-db-ger.com

Wie man ein responsives Hintergrundbild in css3 in Bootstrap verwendet

Ich möchte nicht HTML-Tag verwenden. Das ist mein CSS. Ich benutze Bootstrap 3.0.

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

Bei 100% Zoom ist dies OK. Wenn ich jedoch um ca. 180% zoome, wird das Bild von oben und unten kurz sein, und ich möchte ein paar CSS-Tricks. 

htmlcsscss3twitter-bootstrapbackground-image
46
Faizan

Für den Vollbildhintergrund prüfen Sie Folgendes:

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

Sie müssen background-size: 100% 100%; verwenden.

Demo

Demo 2 (Nicht dehnen, das ist, was du tust)

Erläuterung: Sie müssen 100% 100% verwenden, da es für X so gut wie Y festgelegt ist. Sie setzen 100% nur für den Parameter X, sodass der Hintergrund nicht vertikal verläuft.

Das Bild wird sich zwar ausdehnen, es reagiert nicht, wenn Sie die background proportional dehnen möchten, können Sie nach background-size: cover; suchen, aber IE verursacht hier Probleme, da es sich um die CSS3-Eigenschaft handelt, aber Sie sind es kann CSS3 Pie als Polyfill verwenden. Wenn Sie cover verwenden, wird Ihr Bild zugeschnitten.

17
Mr. Alien

Ich habe das gefunden: 

Voll

Eine einfach zu bedienende, ganzseitige Hintergrundvorlage für Bootstrap 3-Websites

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

oder

Verwendung in Ihrem Haupt-Div-Container:

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

Schau dir das an, 

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

Versuche dies:

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

Der Dateipfad 'images/ip-box.png' impliziert, dass sich die Datei css file auf derselben Ebene wie der Ordner imagesbefindet.

Es ist wahrscheinlich üblicher, "images" - und "css" -Ordner auf derselben Ebene wie die 'index.html' -Datei zu haben.

Wenn dies der Fall wäre und die css-Datei eine Ebene tiefer in ihrem jeweiligen Ordner wäre, lautet der in der css-Datei angegebene Pfad zu ip-box.jpg: '../images/ip-box.png'

1
wkille

Responsive und benutzerfreundliche Hintergrund festlegen 

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