it-swarm.com.de

Responsive Bootstrap Jumbotron-Hintergrundbild

Ich verwende Bootstrap-Jumbotron und ein Hintergrundbild. Wenn Sie die Größe des Bildschirms ändern, wird die Bildkachel wiederholt und das Bild wird wiederholt.

<div class="jumbotron" style="background-image: url(http://www.californiafootgolfclub.com/static/img/footgolf-1.jpg); background-size: 100%;">
   <div class="container for-about">
   <h1>About</h1>
   </div>
</div>

Wie würden Sie das Bild ansprechen lassen? Die Website ist HIER . Danke für deine Ideen!

26
Nick B

Am einfachsten ist es, die Hintergrundgröße auf "cover" .__ zu setzen.

.jumbotron {
  background-image: url("../img/jumbotron_bg.jpg");
  background-size: cover;
}

Steve

42
Steve

Das habe ich getan .
Zuerst überschreiben Sie einfach die Jumbotron-Klasse und führen Sie folgende Schritte aus:

.jumbotron{
    background: url("bg.jpg") no-repeat center center; 
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    background-size: 100% 100%;
}

So, jetzt haben Sie ein Jumbotron mit ansprechendem Hintergrund .. __ Wie bereits von Irvin Zhan geantwortet wurde, wird die Höhe des Hintergrunds immer noch nicht richtig angezeigt.

Eine Sache, die Sie tun können, ist Ihr Div mit einigen Leerzeichen wie diesem zu füllen:

<div class="jumbotron">
    <div class="container">
        About
        <br><br><br> <!--keep filling br until the height is to your liking-->
    </div>
</div>

Oder eleganter können Sie die Höhe des Containers einstellen. Möglicherweise möchten Sie eine andere Klasse hinzufügen, damit Sie die Bootstrap-Containerklasse nicht überschreiben.

<div class="jumbotron">
    <div class="container Push-spaces">
        About
    </div>
</div>

.Push-spaces
{
    height: 100px;
}
7
Fadils

Ich fand, dass dies perfekt für mich funktionierte:

.jumbotron {
background-image: url(/img/Jumbotron.jpg);
background-size: cover;
height: 100%;}

Sie können die Bildschirmgröße ändern und der Fensterinhalt wird immer zu 100% belegt.

5
Justin

TLDR: Verwenden Sie background-size: 100% 100%;

background-size: cover; kann einige Teile des Bildes abschneiden, was zu schlechten Ergebnissen führt.

Mit background-size: 100% 100%; zwingen Sie das Bild, 100% des übergeordneten Elements sowohl für height als auch für width zu übernehmen.

Weitere Informationen hierzu finden Sie unter W3Schools .

Hier ist ein funktionierendes, responsives jumbotron Hintergrundbild:

<div class="jumbotron"  style="background-image: url(http://yourImageUrl.jpg); background-size: 100% 100%;">
    <h1>Welcome</h1>
    <p class="lead">Your message here</p>
    <p><a href="http://www.YourLinkHere.com" class="btn btn-primary btn-lg">Learn more &raquo;</a></p>
</div>
3
maxshuty

So mache ich:

<div class="jumbotron" style="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;">
  <h1>Hello</h1>
</div>

3
JustRocca

Leider gibt es keine Möglichkeit, die div-Höhe auf die Hintergrundgröße anzupassen. Die einfachste Lösung, die ich verwendet habe, ist das Hinzufügen eines img-Tags in Ihrem Jumbotron, das dieses Hintergrundbild enthält. 

2
Irvin Zhan

Der folgende Code funktioniert für alle Bildschirme:

.jumbotron {
   background: url('backgroundimage.jpg') no-repeat center center fixed;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   background-size: cover;
   -o-background-size: cover;
}

Die Cover-Eigenschaft ändert das Hintergrundbild so, dass es den gesamten Container abdeckt, auch wenn das Bild gedehnt werden muss oder die Kanten etwas abgeschnitten werden müssen.

1
Dhanesh Agrawal

Sie könnten dies versuchen: 

Platziere den Code einfach in einem style-Tag im Kopf der HTML-Datei

<style>
        .jumbotron {
            background: url("http://www.californiafootgolfclub.com/static/img/footgolf-1.jpg") center center / cover no-repeat;
        }
</style>

oder lege es in eine separate CSS-Datei, wie unten gezeigt

        .jumbotron {
            background: url("http://www.californiafootgolfclub.com/static/img/footgolf-1.jpg") center center / cover no-repeat;
        }

verwenden Sie center center , um das Bild horizontal und vertikal zu zentrieren . -. - cover , um das Bild den Jumbotronraum ausfüllen zu lassen und schließlich no-repeat , damit das Bild nicht wiederholt wird.

0
Joan