Ich habe dieses Bild in CSS und ich möchte Bootstrap-Klasse hinzufügen: img-responsive, damit es reagiert. Es ist einfach, wenn es in HTML ist, aber wie geht das in CSS?Wie mache ich ein Hintergrundbild in CSS ansprechend? bootstrap
#index-jumbotron {
height: 490px;
margin-left: 0;
margin-right: 0;
background-image: url("../images/Eiffel%20Sunset%203.JPG");
Vielen Dank!
Versuchen:
background-size:cover;
Oder
background-size:contain;
Hier ist, wie Sie reagiert, Hintergrundbilder in CSS tun können:
body {
margin: 0;
}
#index-jumbotron {
background-image: url(http://www.intrawallpaper.com/static/images/City_Landscape_Background_B5hx2zA.jpg);
background-size: cover;
padding-bottom: 46.128%; /* <- This value should be equal to height/width */
}<div>Here goes your menu</div>
<div id="index-jumbotron"></div>
<div>Here goes the rest of your content</div>(siehe auch this Fiddle)
Dies funktioniert sowohl mit als auch ohne Bootstrap.
Hat nicht funktioniert. Ich suche weg um den Bootstrap hinzuzufügen: img-responsive. Ich kann das in HTML tun, weiß aber nicht, wie es gemacht wird, wenn das Bild in CSS ist. – Sei
irgendeine idee? Danke. – Sei
Das CSS ist nicht dynamisch - es wird nicht die Größe ändern, wenn Sie die Größe eines Fensters ändern. Es sollte jedoch korrekt skaliert werden, wenn die Seite in verschiedene Ansichtsfenster geladen wird. Ich denke, "Cover" ist das, was Sie wollen, aber es behält das Bildseitenverhältnis bei, indem Sie auf das Bild zoomen, bis der gesamte Hintergrund des Elements bedeckt ist. Mir ist zu dieser Zeit keine andere Methode bekannt, um Hintergrundbilder ansprechend zu dimensionieren, aber ich werde weiter suchen. – gibberish