Bootstrap 3 – Jumbotron immagine di sfondo

Sto avendo problemi ad impostare un’immagine di sfondo per il bootstrap jumbotrons. Il mio principale.css viene dopo il bootstrap css e sto selezionando il jumbotron utilizzando una classe denominata “banner”, che è nello stesso div come il gigante, ma ancora non funziona. Ecco il mio codice…

HTML:

  <!-- Banner -->
  <div class="jumbotron banner">
    <div class="container">
      <hgroup>
        <h1>
          Bits king
        </h1>
        <h2>
          Web Design &amp; Development
        </h2>
      </hgroup>
    </div>
</div>

CSS:

 .banner {
  height: 400px;
  width: 100%;
  max-height: 50%;
  max-width: 100%;
  min-height: 20%;
  min-width: 30%;
  background-image: url("../assets/images/banner.jpeg");
  background-size: cover;
}



3 Replies
  1. 9

    È possibile aggiungere un background-image proprietà .jumbotron classe nel file css personalizzato (assicurarsi che è possibile fare riferimento a file css personalizzato dopo di Bootstrap. Ecco un esempio:

    .jumbotron {
        background-image: url("/img/your-image.jpg");
        background-color: #17234E;
        margin-bottom: 0;`enter code here`
        min-height: 50%;
        background-repeat: no-repeat;
        background-position: center;
        -webkit-background-size: cover;
        background-size: cover;
    }
    • In realtà ho risolto questo problema, ho dovuto caricare la mia immagine di MediaFire e link in CSS da lì. Per qualche ragione, in precedenza, non mi ha permesso di utilizzare l’immagine locale. Ma grazie, questa sarebbe la migliore risposta
    • Ha funzionato per me, grazie!!!!!!!
  2. 1

    aggiungere “jumbotron-custom” per attributo di classe e applicare questo dopo il “bootstrap” css :

    .jumdotron-custom
    {
        background: url('/*background url*/') no-repeat !important;
    }

    ..o semplicemente aggiungere !importante il ‘background-image’ di css.

    • Che è quello che ho fatto in pratica, ho aggiunto il “banner” classe al jumbotron div
    • hai aggiunto !importante dopo la vostra proprietà background?
  3. 0

    Buongiorno. Prova questo:

    background-image: url("../assets/images/banner.jpg");

    Fatemi sapere se funziona o no?

    • questo è esattamente ciò che ho fatto nel codice CSS, scusa per non rispondere presto. Stack Overflow quanto pare ha deciso di smettere di mandarmi e-mail per qualche strano motivo lol

Lascia un commento