Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

General Discussion

Posted by Tina Maddox
Tina Maddox
28,102 Points

Hello, Help please: The image 'device-hero.png' will not display. All img files in same folder.

I downloaded all files for this project and am working in sublime. Thanks for your help!

My code index.html --- <!DOCTYPE html> <html> <head> <title>Ribbit - A Treehouse Project</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="css/bootstrap.css" rel="stylesheet"> <link href="css/my-styles.css" rel="stylesheet" media="screen"> <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]> <script src="../../assets/js/html5shiv.js"></script> <script src="../../assets/js/respond.min.js"></script> <![endif]--> </head> <body>

<!--Navbar -->
<div class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <a class="main-logo pull-left" href="#">Ribbit</a>
    <p class="navbar-text pull-right hidden-xs">A Treehouse Project</p>
  </div>
</div><!-- End navbar -->

<!-- Jumbotron -->
<div class="jumbotron">
  <div class="container">
    <div class="row">
      <div class="col-sm-6">
        <h1>Self-destructing messages are only a hop away.</h1>
        <p class="lead">Learn how to build this fun little app by signing up for a Treehouse account today! We'll teach you how to build both apps from scratch!</p>
        <p class="lead">Or download the app and try it first.</p>
        <p class="lead">
          <a class="btn btn-default btn-lg" href="#">iOS</a>
          <a class="btn btn-default btn-lg" href="#">Android</a>
        </p>
      </div>
      <div class="col-sm-6 hidden-xs">
        <div class="device pull-right"></div>
    </div>
  </div>
</div><!-- End Jumbotron -->

</body>

</html>

CSS

/* Typography ================================= */

.navbar-text { font-weight: bold; margin-right: 0; }

h1 { font-weight: 200; margin-bottom: 30px; }

.lead { color: #d5c1f2; margin-bottom: 75px; }

.lead:nth-of-type { font-size: initial; margin-bottom: 20px; }

/* Jumbotron ================================= */ .jumbotron { background-image: url("../img/main-bg.png"); background-repeat: no-repeat; background-position: 200% 100%; padding: 200px 0 140px 0; margin-bottom: 70px; }

.device { width: 345px; height: 589; background: url("../img/device-hero.png") no-repeat; }

/* Logos & Icons ================================= */

.main-logo { width: 124px; height: 34px; margin-top: 22px; text-indent: 100%; white-space: nowrap; overflow: hidden; background: url('../img/main-logo.png') no-repeat; background-size: 100%; }

3 Answers

John Hill
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
John Hill
Front End Web Development Techdegree Graduate 35,236 Points
John Hill
.a{fill-rule:evenodd;}techdegree seal-36
John Hill
Front End Web Development Techdegree Graduate 35,236 Points

Hi Tina, Are the other pictures (main-bg.png and main-logo.png) showing up correctly?

You could try typing in the full file path for device-hero.png. And just to double check, that particular file isn't corrupted, yeah? Meaning you can click and open it and it displays correctly in a photo preview?

Tina Maddox
Tina Maddox
28,102 Points

Hi John, I have tried it with many other images along with the one it is supposed to be loading using full file path or shortened version. I then created a new <div> <img src="img.file.path" and the closest I got was that tiny img letting me know "there should be an image here".

I can't stand moving forward in a project without being to figure out what isn't working...

Tina Maddox
Tina Maddox
28,102 Points
Tina Maddox
Tina Maddox
28,102 Points

Hello John Hill, Thanks for the advice. Trying that now. :)

John Hill
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
John Hill
Front End Web Development Techdegree Graduate 35,236 Points
John Hill
.a{fill-rule:evenodd;}techdegree seal-36
John Hill
Front End Web Development Techdegree Graduate 35,236 Points

Here's one thing: you're missing a 'px' after "height: 589"

.device { width: 345px; height: 589; background: url("../img/device-hero.png") no-repeat; }
Tina Maddox
Tina Maddox
28,102 Points

Thanks! That fixed some spacing issues. The image file still wouldn't load so I deleted the files and downloaded them again. They are working now!

Thank you for all of your help!

John Hill
.a{fill-rule:evenodd;}techdegree seal-36
John Hill
Front End Web Development Techdegree Graduate 35,236 Points

Cool -- glad it's working now!