Bootstrap Jumbotron Hintergrundbild

Question

Habe diese Seite seit Stunden auf und ab gesucht und kann nicht herausfinden, was falsch ist, wenn ich ein Jumbotron-Hintergrundbild reagiere (ich bin ganz neu beim Bootstrap). Ich habe alles ausprobiert und nichts funktioniert. Das Bild wird bei der Größenanpassung extrem gestreckt, an der Unterseite oder oben abgeschnitten oder gequetscht. Ich habe es auch versucht, aber das macht das Bild zu klein.

.jumbotron { 
    height:600px; 
    background: url("JoelCanada.jpg") no-repeat center center; 
    -webkit-background-size: 100% 100%; 
    -moz-background-size: 100% 100%; 
    -o-background-size: 100% 100%; 
    background-size: 100% 100%; 
    } 
.jumbotron { 
    height:600px; 
    background: url("JoelCanada.jpg") no-repeat center center; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

Und hier ist der HTML

<div class="jumbotron jumbotron-fluid"> 
    <div class="container jumboText"> 


       <h2> Discover </h2> 
<p> Text </p> 
    <button type="submit" name="countries" class="jumboButton"> Button &#8696 </button> 
    <button type="submit" name="countries" class="jumboButton"> Button &#8696 </button> 
    <button type="submit" name="countries" class="jumboButton"> Button &#8696 </button> 
       </div> 
     </div> 

Jede Hilfe

Answer 1

Nicht sicher geschätzt, wenn es beabsichtigt war, aber Sie sollten die .jumbotron Klasse nur einmal stylen.

Ihre zusätzliche Klasse jumboText verwendet camelcase, das nicht mit der aktuellen Bootstrap-Klassenkonvention übereinstimmt, die den Bindestrich - verwendet. Stylen Sie Ihre Header-Tags global aus Konsistenzgründen und verwenden Sie sie im HTML-Format in einer Hierarchie, beginnend mit einer h1 Seite oben und dann bei Bedarf herunter kaskadierend. Versuchen Sie, die integrierten Klassen so weit wie möglich zu verwenden, minimieren Sie die benutzerdefinierten Klassen und verwenden Sie sie mit gutem Grund.

Dies zu verstehen ist auch ein bisschen in keinem Zusammenhang sollte aber seit Ihrem neuen notiert werden, um Bootstrap aber Ihre <button> ‚s sollte a nchor-Tags mit dem Bootstrap btn in Klassensystem aufgebaut sein und sie global in Ihrem CSS-Stil.

Unten finden Sie eine FIDDLE mit einem "responsive" jumbotron Hintergrund: https://jsfiddle.net/jeremykenedy/p1u3aryv/10/

Möglicherweise möchten Sie dies oft verweisen, bis Sie vertrauter mit dem Rahmen sind:

http://getbootstrap.com/css/ http://getbootstrap.com/components/ http://getbootstrap.com/javascript/

Was der FIDDLE zeigt:

HTML:

<nav class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#">Project name</a> 
    </div> 
    <div id="navbar" class="navbar-collapse collapse"> 
     <form class="navbar-form navbar-right"> 
     <div class="form-group"> 
      <input type="text" placeholder="Email" class="form-control"> 
     </div> 
     <div class="form-group"> 
      <input type="password" placeholder="Password" class="form-control"> 
     </div> 
     <button type="submit" class="btn btn-success">Sign in</button> 
     </form> 
    </div> 
    <!--/.navbar-collapse --> 
    </div> 
</nav> 

<!-- Main jumbotron for a primary marketing message or call to action --> 
<div class="jumbotron"> 
    <div class="container"> 
    <h1>Hello, world!</h1> 
    <p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p> 
    <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more &raquo;</a></p> 
    </div> 
</div> 

<div class="container"> 
    <!-- Example row of columns --> 
    <div class="row"> 
    <div class="col-md-4"> 
     <h2>Heading</h2> 
     <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> 
     <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p> 
    </div> 
    <div class="col-md-4"> 
     <h2>Heading</h2> 
     <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> 
     <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p> 
    </div> 
    <div class="col-md-4"> 
     <h2>Heading</h2> 
     <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p> 
     <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p> 
    </div> 
    </div> 

    <hr> 

    <footer> 
    <p>&copy; 2016 Company, Inc.</p> 
    </footer> 
</div> 
<!-- /container --> 

CSS:

.jumbotron { 
    background: url(https://s3-us-west-2.amazonaws.com/consultjeremy.com/backgrounds/about-bg.jpg) no-repeat center center; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    min-height: 600px; 
    color: #ffffff; 
}