CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3background-image
Brandon Gonzales
Brandon Gonzales

Reputation: 27

Bootstrap 3 - Jumbotron background image

I am having trouble setting a background image for bootstrap jumbotrons. My main.css comes after the bootstrap css and I am selecting the jumbotron using a class called "banner" which is in the same div as the jumbotron, but it still doesn't work. Here is my code...

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

Upvotes: 1

Views: 32127

Answers (3)

Kangjun Heo
Kangjun Heo

Reputation: 1081

add "jumbotron-custom" to class attribute and apply this after "bootstrap" css :

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

..or just add !important to your 'background-image' of css.

Upvotes: 1

AAW238
AAW238

Reputation: 104

You can add a background-image property to the .jumbotron class in your custom css file (Make sure you reference your custom css file after Bootstrap. Here's an example:

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

Upvotes: 9

Shahid
Shahid

Reputation: 145

Good Morning. Try this:

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

Let me know if it works or not?

Upvotes: 0

Related Questions