Project: Bolt. No background


#1


Has anybody else run into the issue where the background in the supporting section does not display? It is pre-filled in the stylesheet by Codecademy, but nothing actually displays.


#2

@rsoricelli,
Give us the FULL HTML & CSS code you are using....


#3

Here it is. The background-image for the .supporting div was already pre-filled in the stylesheet. I even tried moving it up to the body, but no dice.

HTML
`

<div class="jumbotron">
  <div class="container">
    <div class="header">
				<div class="row">
        <div class="col-md-2">
          <img src="https://s3.amazonaws.com/codecademy-content/projects/bolt-network/logo.svg">
        </div>
        <div class="pull-right">
          <ul>
            <li><a href="#">Login</a></li>
            <li><a href="#" class="btn btn-default">Sign Up</a></li>
          </ul>
        </div>
      </div>
    </div>

    <div class="main">
    	<h1>Watch your favorite movies, instantly.</h1>
      <a href="#" class="btn btn-default">Learn More</a>
      <form role="form" class="form-inline">
        <div class="form-group">
          <input type="text" class="form-control" id="search" placeholder="Browse the collection">
          <button type="submit" class="btn btn-default">Search </button>
        </div>
      </form>
    </div>
  </div>
</div>

<div class="supporting">
  <div class="container">
			<h2>A world of movies at your fingertips.</h2>
    <p>Choose from the latest titles, with new movies added every day.</p>
    <div class="row">
      <div class="col-md-8">
        <img class="thumbnail" src="https://s3.amazonaws.com/codecademy-content/projects/bolt-network/the-avengers.jpg">
      </div>
      <div class="col-md-4">
         <img class="thumbnail" src="https://s3.amazonaws.com/codecademy-content/projects/bolt-network/harry-potter.jpg">
      </div>
    </div>
    <div class="row">
      <div class="col-md-4">
         <img class="thumbnail" src="https://s3.amazonaws.com/codecademy-content/projects/bolt-network/frozen.jpg">
      </div>
      <div class="col-md-4">
         <img class="thumbnail" src="https://s3.amazonaws.com/codecademy-content/projects/bolt-network/iron-man.jpg">
      </div>
      <div class="col-md-4">
         <img class="thumbnail" src="https://s3.amazonaws.com/codecademy-content/projects/bolt-network/transformers.jpg">
      </div>
    </div>
    <div class="row">
      <div class="col-md-4">
         <img class="thumbnail" src="https://s3.amazonaws.com/codecademy-content/projects/bolt-network/lord-of-the-rings.jpg">
      </div>
      <div class="col-md-8">
         <img class="thumbnail" src="https://s3.amazonaws.com/codecademy-content/projects/bolt-network/skyfall.jpg">
      </div>
    </div>
    <div class="row">
      <div class="col-md-4">
         <img class="thumbnail" src="https://s3.amazonaws.com/codecademy-content/projects/bolt-network/the-dark-knight.jpg">
      </div>
      <div class="col-md-4">
         <img class="thumbnail" src="https://s3.amazonaws.com/codecademy-content/projects/bolt-network/pirates-of-the-caribbean.jpg">
      </div>
      <div class="col-md-4">
         <img class="thumbnail" src="https://s3.amazonaws.com/codecademy-content/projects/bolt-network/toy-story-3.jpg">
      </div>
    </div>
  </div>
</div>

<div class="feature">
  <div class="container">
    
  </div>
</div>

<div class="footer">
  <div class="container">
    
  </div>
</div>

`

CSS
`.html, body {
font-family: "Oxygen", sans-serif;
font-weight: 300;
margin: 0;
padding: 0;
}

.container {
max-width: 970px;
}

/* jumbotron */

.jumbotron {
background-color: #000;
height: 600px;
}

.jumbotron .header {
color: #fff;
}

.header ul {
list-style: none;
}

.header li {
display: inline;
margin-right: 30px;
}

.jumbotron .btn {
color: #0393ff;
background: transparent;
border: 1px solid #0393ff;
border-radius: 2px;
padding: 8px 20px;
}

.main {
text-align: center;
color: #fff;
}

.main h1 {
color: #fff;
font-weight: 300;
margin-top: 80px;
margin-bottom: 40px;
}

.main form {
margin-top: 80px;
}

search {

background: transparent;
border: 0;
border-radius: 0;
border-bottom: 1px solid #fff;
color: #fff;
font-size: 18px;
margin: 0 20px;
width: 400px;
}

/* supporting */

.supporting {
background-image: url("s3.amazonaws.com/codecademy-content/projects/bolt-network/diagmonds_@2X.png");
background-size: 141px 142px;
}

.supporting h2 {
color: #0393ff;
margin-top: 60px;
margin-bottom: 10px;
font-size: 32px;
font-weight: 300;
text-align: center;
}

.supporting p {
margin-bottom: 45px;
font-size: 16px;
text-align: center;
color: #fff;
}

.supporting .thumbnail {
background: transparent;
border: none;
padding: 0;
}

`


#4

Found the solution in another thread. It's a broken link to the image. The correct link is given in the thread with the solution.

Thread: https://discuss.codecademy.com/t/unable-to-display-the-background-picture-in-the-supporting-section/7555/3


#5

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