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

CSS

Posted by Christina Pruitt
Christina Pruitt
3,000 Points

Why aren't images showing up?

I'm trying to practice coding on here, and I don't know why my images aren't showing up.

``<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="css/style.css"> <link rel='stylesheet' type='text/css'> <meta charset="utf-8" content="width=device-width, initial-scale=1.0"> <title>Summer in Seattle</title> </head> <body> <header id="top" class="main-header"> <h1 class="title">Summer in Seattle</h1> </header> <div class="event"> <p> Seattle, Washington is a different world during the months of June through the end of September. During the summer months, it's like an entire different world, straight out of a teen summer movie.</p> <a href="#more">Find out more</a>

<h2> Summer Events</h2>
 <p><img src="img/kerrypark.jpg" alt="Seattle Skyline"></p>
 <p>There are numerous events that take place in different neighborhoods throughout the city. Here are a couple that happen during each month.</p>
<ul>
  <li><a href="#Solstice_Festival">Solstice Festival</a></li>
  <li><a href="#Pride">Pride Parade</a></li>
  <li><a href="#Sea_Fair">Sea Fair</a></li>
  <li><a href="#Night_Market">International District Night Market</a></li>
</ul>
</div>

<h3>Things to Do</h3>
<p>When there isn't an event happening, you can visit one of the many hot spots locals frequent.</p>
<ul>
  <li> Pike Place Market</li>
    <li>Kayak on Lake Washington</li>
      <li>Bike on Burke-Gilman Trail</li>
        <li>Washington Arboretum</li>
</ul>      
<ul>
  <li>Bon fire at Golden Gardens Park</li>
    <li>Seattle Aquarium</li>
      <li>Woodland Park Zoo</li>
      <li><a href="#Theos"><span style="color:white">Secret Chocolate Factory!</span></a></li>
</ul>
    <footer>
  <p>&copy; 2015 Designed by Christina Pruitt.</p>
  <a href="#top">Back to top &raquo;</a>
</footer>

</body> </html>``

And my CSS:

``/* Base Styles -----------------------*/

body { color: #FFF margin: 0; font: Helvetica, Arial, sans-serif; }

a:link { text-decoration: none; color: #0099FF; }

li { list-style-type: none; }

h1 {
font-size: 5.625rem; /* 90px/16px */ color: rgba(255, 255, 255, 1); text-transform: uppercase; font-weight: normal; line-height: 1.3; margin: 12px 0 0; align-content:center; }

h2 { font-size: 3.3125em; /* 53px/16px / font-weight: normal; line-height: 1.1; margin: 0 0 .5em; / 0 0 26px */ }

img { max-width: 100%; margin-bottom: 20px; border-radius: 10px; }

/* Main Styles ----------------------- */

.main-header { height: 400px; padding-top: 170px;

background: linear-gradient(to bottom, #0099FF, #00FFFF); #0099FF url ('../img/Sea_Aquarium.jpg') no-repeat center; background-size: cover; }

.title { color: white; align-content: center; }

.event { color: white; background-color: #434a52; padding: 18% 24%; border-top: 10px solid #0099FF; margin: 105px 0 60px; }

/* Media Queries --------------------- @media (max-width: 760px) { .primary-content, .secondary-content { width: 100%; padding: 20px; border-top: none; } .main-header { max-height: 380px; padding: 50px 25px 0; } .title { font-size: 1.3rem; border: none; } h1 { font-size: 5rem; line-height: 1.1; } */``

Marcus Parsons
Marcus Parsons
15,719 Points

Hey Christina,

Your code didn't render quite correctly. If you're working on this in Workspaces, can you post a snapshot to your Workspace? If you don't know how to do that, check out this post: http://www.teamtreehouse.com/forum/workspace-snapshots

10 Answers

Marcus Parsons
Marcus Parsons
15,719 Points

Now, I see your issue, Christina. The images weren't actually located in the "img" folder. Once I dragged them into the "img" folder, they worked as expected. There are a couple ways you can tell that files are a part of a folder in Workspaces: 1) Click the right/down arrow beside the folder and see if the files appear/disappear respectively. If they do, the files are in the folder. If they don't, they aren't. 2) Look at the file names in the sidebar and see if they look like they are tabbed in like your code. If they are tabbed in, they are a part of a folder. :P

Christina Pruitt
Christina Pruitt
3,000 Points

Great, now I feel stupid. But I have another question. I'm trying to get an image in the background of the top header instead of the linear gradient, but it's not showing up. It's showing up red in my css, but I'm pretty sure I typed it correctly.

Marcus Parsons
Marcus Parsons
15,719 Points

Is this your current background code?

.main-header {
  height: 400px;
  padding-top: 170px;
  background: linear-gradient(to bottom, #0099FF, #00FFFF);
               #0099FF url ('../img/Sea_Aquarium.jpg') no-repeat center;
  background-size: cover;
}
Marcus Parsons
Marcus Parsons
15,719 Points

Btw, don't feel stupid, Christina. It's just some stuff that happens to the best of us! :)

Christina Pruitt
Christina Pruitt
3,000 Points
Christina Pruitt
Christina Pruitt
3,000 Points

Here's an updated snapshot. It was on treehouses fault for it not working correctly.

https://w.trhou.se/gmvq71rtla

Christina Pruitt
Christina Pruitt
3,000 Points
Christina Pruitt
Christina Pruitt
3,000 Points

Okay, I think I did it right: https://w.trhou.se/vtbr5pawnj

Marcus Parsons
Marcus Parsons
15,719 Points

There's nothing contained in the snapshot. Were you working on this code in Workspaces or in another environment?

Christina Pruitt
Christina Pruitt
3,000 Points
Christina Pruitt
Christina Pruitt
3,000 Points

I'm doing this in the Workspaces section on treehouse. I started from a blank document to see if I could do it from scratch.

Marcus Parsons
Marcus Parsons
15,719 Points

The reason why I asked you to post a snapshot was so that I could look at the code you have to see why it's not working.

Marcus Parsons
Marcus Parsons
15,719 Points

You should post a snapshot of the Workspaces that contains the relevant code, if you still have it.

Christina Pruitt
Christina Pruitt
3,000 Points
Christina Pruitt
Christina Pruitt
3,000 Points

That was what I posted. I already contacted support.

Marcus Parsons
Marcus Parsons
15,719 Points

If you started a new, blank workspace and get a snapshot of that workspace, it is not going to contain anything. I'm not quite understanding what you did, because you obviously have code for your page, but none of it is in the workspace. Did you delete all of the files within the workspace or just a start new blank workspace and delete the old one?

jerry bremser
jerry bremser
3,941 Points
jerry bremser
jerry bremser
3,941 Points

i think it might be because you placed your first image inside a < p > element

Marcus Parsons
Marcus Parsons
15,719 Points

No, you can place an image element inside of many different elements...

Christina Pruitt
Christina Pruitt
3,000 Points
Christina Pruitt
Christina Pruitt
3,000 Points

Here's the link to my site http://port-80-jwcy3bp9ez.treehouse-app.com/

I don't know what else to do while waiting for support to contact me back.

Marcus Parsons
Marcus Parsons
15,719 Points

Go to that workspace and take a snapshot of that particular workspace. I'm thinking you may have some invalid filenames or something along those lines.

Christina Pruitt
Christina Pruitt
3,000 Points
Christina Pruitt
Christina Pruitt
3,000 Points

I did! That's what I did in the first place!

Marcus Parsons
Marcus Parsons
15,719 Points

Please try it again. I know you're frustrated, but that's why I'm here helping you :)

Christina Pruitt
Christina Pruitt
3,000 Points
Christina Pruitt
Christina Pruitt
3,000 Points

Yes, that's my current background code. The first hex color on the second line, the 'url', the 'no-repeat', and the 'center' are in red.

Marcus Parsons
Marcus Parsons
15,719 Points

Well, the problem is that is not how you define things in CSS. Notice that the semicolon ends the line with background and then there's just stuff on the other end? Follow this rule when you declare CSS properties:

selector {
property: value /* or values separated by spaces */ ;
}

Whenever you have multiple values for one property, you always put them before any semicolons and have spaces between them, of course.

Now, with your code, you should delete the linear-gradient portion and the other color and just use the url, no-repeat, and center properties. I've tested this in your Workspace with the images in the "img" folder and it works :P

.main-header {
  height: 400px;
  padding-top: 170px;
  /* Eliminated colors from within background property
      and deleted the space between the "url" command
      and the following parenthesis */
  background: url('../img/Sea_Aquarium.jpg') no-repeat center;
  background-size: cover;
}
Christina Pruitt
Christina Pruitt
3,000 Points
Christina Pruitt
Christina Pruitt
3,000 Points

alright, thank you for helping me!

Marcus Parsons
Marcus Parsons
15,719 Points

Did it work for you on your end? lol You're welcome!