Need Help with Jumbotron Background Image


#1



Hey guys I'm having trouble with getting my background image in my jumbotron div to fill the whole div and am instead only getting about a third of it to display onscreen. Not too sure where the mistake is but here is my code. Any help is appreciated. Thanks!
HTML

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css">
    <link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="header">
      <div class="container">
        <ul class="nav">
          <li class="active">Adoptly</li>
          <li>About</li>
          <li>Animals</li>
          <li>Blog</li>
          <li>Events</li>
        </ul>
      </div>
    </div>

    <div class="jumbotron">
      <div class="container">
        <h1>Meet your new best friend.</h1>
      </div>
    </div>

    <div class="supporting">
      <div class="container">
      </div>
    </div>
    
    <div class="footer">
      <div class="container">
      </div>
    </div>
  </body>
</html>

CSS

html, body {
  margin: 0;
  padding: 0;
  font-family: 'Montserrat', sans-serif;
}

.container {
  max-width: 940px;
  margin: 0 auto;
  padding: 0;
}

/* Navigation Bar */

.header {
  background-color: #30627E;
}

.nav {
  list-style-type: none;
  margin-left: 0;
  text-align: center;
}

.nav li {
  color: #FFF;
  font-size: 20px;
  display: inline-block;
  padding: 20px 20px 20px 20px;
}

.nav .active {
  background: #E52364;
  font-size: 28px;
}

/* Jumbotron */

.jumbotron {
  background: url("https://s3.amazonaws.com/codecademy-content/projects/adoptly/bg.jpg");
  background-size: 100%;
  text-align: center;
  height: auto;
}

.jumbotron h1 {
  color: #E52364;
}

@media (max-width: 500px) {
  ul li {
    width: 100%;
  }
}


#2

Hi,
First of all, the div class for your nav bar is the same as the div class containing the h1 heading. The class of the div container has to be different to make changes to the div.

Secondly, remove the div inside the Jumbotron is possible. If not, then try to place the background image inside the div inside the jumbotron.
Regards
Satanshu


#3

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.