Trouble Overriding Bootstrap Jumbotron

user_14101429 0
Viewed 90

I have been researching this for two days now and nothing that I try seems to be working. All I want to do is to set an image as the background for a jumbotron class in bootstrap.

I have successfully done this with inline CSS, but want to avoid using that. I have tried assigning background-image: url('link'); to the jumbotron class. I have assigned it to its own unique id, I've tried assigning it to #id .jumbotron together but it does not apply the image.

This is the jumbotron I want a background image on.

<div class="jumbotron jumbotron-fluid" id="jumbotronBackground" >
    <div class="container">
        <img id="logoMain" src="nslogo1.png" >
    </div>
</div>
twitter-bootstrap css html
2 Answers

You can use #jumbotron as a reference but it is better to just stick with classes.

Just make sure the rule is specific enough, that you can override the property. E.g. #jumbotronBackground.jumbotron is higher specific than just #jumbotronBackground or .jumbotron.

If you want to override a property you can add more specifiers. Just for completion sake: There is !important that you can add after the attribute if the rule is less specific, it will ignore all other selectors that would otherwise apply, but this is bad practice!

.jumbotron.example1 {
  height: 160px;
  background-image: url('https://via.placeholder.com/150');
  background-repeat: no-repeat;
  /* repeat is default, use no-repeat if you want the image to render only once */
  background-size: contain;
  /* contain will make it render so that the image will be fully contained in the corresponding element (keeps the aspect ratio), cover will make it fill 100% of the space available (keeps the aspect ratio) */
}

.jumbotron.example2 {
  height: 160px;
  border: 1px dotted black;
  /* it will use the background-color that is defined in jumbotron you could set background-color: $color to change it */
  background-image: url('https://via.placeholder.com/150');
  background-repeat: no-repeat;
  /* here the image will be 150px wide and high */
}

.jumbotron.example3 {
  height: 160px;
  border: 1px dotted black;
  /* it will inherit the color from the parent - here body - you could also use transparent or white */
  background-color: inherit;
  background-image: url('https://via.placeholder.com/150');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  /* here the image will be full width/height, but without the aspect ratio */
}
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>

<body>
  <div class="jumbotron example1 jumbotron-fluid" id="jumbotronBackground">
    <div class="container">
      <img id="logoMain" src="nslogo1.png">
    </div>
  </div>

  <div class="jumbotron example2 jumbotron-fluid" id="jumbotronBackground2">
    <div class="container">
      <img id="logoMain" src="nslogo1.png">
    </div>
  </div>

  <div class="jumbotron example3 jumbotron-fluid" id="jumbotronBackground3">
    <div class="container">
      <img id="logoMain" src="nslogo1.png">
    </div>
  </div>
</body>

user_12942830

I think you should start your CSS by using the transparent value for the background property followed by the URL of the background image. Please find the code below.
Hope this code will solve your problem.

.jumbotron {
  background: transparent url(https://images.pexels.com/photos/417074/pexels-photo-417074.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260) no-repeat 50% 50%;
}
user_99073340
Related