Wie reaktionsfähiges Hintergrundbild in CSS3 in Bootstrap

Question

verwenden 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 das OK. aber wenn ich ungefähr 180% heranziehe, ist das Bild von oben und unten kurz, ich möchte ein paar CSS-Tricks.

Answer 1

Für Vollbildhintergrund, überprüfen Sie diese:

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

Answer 2

Sie benötigen background-size: 100% 100%;

Demo

Demo 2 zu verwenden (wird nicht strecken, das ist, was Sie tun)

Erläuterung: Sie müssen 100% 100% als es verwenden Sätze für X sowie Y, setzen Sie 100% nur für den X Parameter, damit der Hintergrund nicht vertikal dehnt.

---

Dennoch wird das Bild ausstrecken, wird es nicht reagieren, wenn Sie die background proportional strecken möchten, können Sie für background-size: cover; aussehen können, aber IE wird für Sie hier Probleme schaffen, wie es CSS3-Eigenschaft ist, aber Ja, Sie können CSS3 Pie als Polyfill verwenden. Wenn Sie cover verwenden, wird das Bild beschnitten.

Answer 3

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

Answer 4

Die Pfaddatei 'images/ip-box.png' bedeutet, dass die CSS-Datei auf dem gleichen Niveau ist wie die Bilder Ordner.

Es ist wahrscheinlich häufiger "Bilder" und "Css" Ordner auf der gleichen Ebene wie die 'index.html' Datei.

Wenn das der Fall und die CSS-Datei war eine Ebene war in ihren jeweiligen Ordnern nach unten, dann der Pfad zu ip-box.jpg wie in der CSS-Datei angegeben sei: '../images/ip-box.png'

Answer 5

fand ich diese:

Voll

Ein einfach zu bedienen, Vollseitenbild Hintergrund Vorlage für Bootstrap 3 Websites

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

oder

in Ihrem Haupt-div Container mit:

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

Answer 6

Set Responsive und Benutzerfreundliche Hintergrund

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

Answer 7

Try this:

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