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 Tommy Gebru
Tommy Gebru
30,164 Points

Cannot seem to find the solution... html/css

Hey I am practicing an exercise on Codecademy though Treehouses Workspaces, workspaces seems to work fine enough for the past hour , So I am trying to get the "jumbotron" -class background image to appear. It did not work, so I tried an image I have downloaded from the internet onto my computer. I remembered to upload the image file to Workspaces but this also failed to appear... Any thoughts? Thnx

<!DOCTYPE html>
<html>
  <body>
  <div class="nav">
  <div class="container">
    <ul>
      <li>Tommy Gebru</li>
      <li>Browse</li>
    </ul>

    <ul>
      <li>Sign Up</li>
      <li>Log In</li>
      <li>Help</li>
    </ul>

    </div>
    </div>

    <div class="jumbotron">
    <div class="container">
    <h1>Find a place to stay</h1>
    <p>Rent from people in over 34,000 cities and 192 countries</p>
    </div>
    </div>


    <div class="learn-more">
    <div class="container">

    <div>
    <h3>Travel</h3>
    <p><a href="#">From apartment and rooms to treehouses and boats: stay in unique spaces in 192 countries.</a>See how to travel on Airbnb</p>
    </div>  

     <div>
    <h3>Host</h3>
    <p><a href="#">Renting out your unused space could pay your bills or fund your next vacation.</a>Learn more about hosting</p>
    </div>  

     <div>
    <h3>Trust and Safety</h3>
    <p><a href="#">From Verified ID to our worldwide customer support team, we've got your back.</a>Learn about trust at Airbnb</p>
    </div>  

    </div>
    </div>

  </body>
</html>

/*Links along the Navigation*/

.nav a {color:#5a5a5a;
        font-size:11px;
        font-weight:bold;
        padding-top:14px;
        padding-bottom:14px;
        padding-left:10px;
        padding-right:10px;
        text-transform:uppercase;
}

.jumbotron {height:500px;
            background-image: url('vacation.jpg');
}

8 Answers

Wayne Priestley
Wayne Priestley
19,579 Points

Hey Tommy,

I've got this done so far, its getting late so I'm calling it a night, ill do more tomorrow.
I shrunk your image down, I changed a bit of html, added <head> tags.
you'll have to go through it as my css file in the <head> will be a different name than yours.

Here is a link to download the whole folder with files:

[LINK EXPIRED]

Take a good look through it to find the changes okay.

Talk later

Tommy Gebru
Tommy Gebru
30,164 Points

Hey Wayne, Thanks for being patient with me, I am glad to have worked with you, talk soon.

Adam Bennett
Adam Bennett
7,663 Points
Adam Bennett
Adam Bennett
7,663 Points

A couple of things to try just off the top of my head would be, 1. try using double quotes instead of single quotes. 2. would be to make sure that the image file you are using is in the same folder as the index.html file. Also not that this will fix this issue but it might help, why have two divs for this and the learn-more containers? You could just as easily have one div with two classes applied to it. It could be that the container div is on top of the jumbotron div and the container div is not opaque. So try it like this <div class= "jumbotron container">, and you will have two classes applied to the same div without the need for multiple divs. Hope some of this helps.

Tommy Gebru
Tommy Gebru
30,164 Points

Thnx Adam,

I am just going back and forth saving my work on Treehouse (copy+paste) as I practice an exercise on Codecademy, for fun?

5 minutes later I feel silly when going over code, I realized there is no header or link tag, this was because Codecademy didn't need it for their exercises. It works now thanks for the help.

Adam Bennett
Adam Bennett
7,663 Points
Adam Bennett
Adam Bennett
7,663 Points

Are the images the same size? Maybe the div is too small for your image? Just a guess.

Tommy Gebru
Tommy Gebru
30,164 Points

It works now just had to play with it,

However, the image is too big, and I tried to "center" it, it did not help much then I tried to change the height

.jumbotron {height:500px;
            background-image: url('vacation.jpg');
}

to 

.jumbotron {height:500px;
                      max-height:100%;
                      max-width:100%;
            background-image: url('vacation.jpg');
}

And this change was supposed to shrink the image for the best fit. But it did not work.

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

HiTommy,

Id recommend you have your images in a separate folder that is just for images, having your index file in your image folder will cause you problems. You really want your index file in the root folder, the folder that contains all your files for the website.
When you open that folder the contents should be something like this:

  1. Index.html file
  2. CSS folder
  3. image folder
  4. Content folder (all other html pages like about.html, contact.html etc)
  5. js folder

You get the idea, keep different items separate.
Once you have your file and folders sorted out try this code and see how you get on.
This code is based in the file structure i have listed above. Don't forget that you will have to change the path to your css file to css/main.css or whatever your style sheet is called. 

.jumbotron {
  background-image: url('../image/vacation.jpg') no-repeat;
  max-width: 100%;         
}

Let me know if you need more help.

Tommy Gebru
Tommy Gebru
30,164 Points

Hey Wayne, so this snippet of code worked

.jumbotron {
            height:500px;
            max-width:100%;
            background-image:url('../image/vacation.jpg');
            color:#f55;
}

So it works the image appears but only partially My question is why would this not work?

.jumbotron {
            max-height:100%;
            max-width:100%;
            background-image:url('../image/vacation.jpg');
            color:#f55;
Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Hi Tommy,

If your image appears only partially try removing the height and see how that looks, if it's not how you want it just let me know and I'll take another look at your code okay. The max-width is always good to set at 100% as it insures that the image never appears chopped off by the browser.

I'm glad you appear to have a better folder and file structure now too.

If you need more help with anything just ask.

Tommy Gebru
Tommy Gebru
30,164 Points

Hey Wayne,

the image (at 100% max-width) is helpful but maybe my image is too big at 1.4 megabytes. The best I seem too get is this

.jumbotron {
            height:500px;
            max-width:100%;
            background-image:url('../image/vacation.jpg');
            background-position:center;
            color:#f55;
}

And I don't think its good at all.

Wayne Priestley
Wayne Priestley
19,579 Points

Hey Tommy,

Do you have the website online? so i could take a look.
The usual ways to look at this won't really work as i don't have the image.

Do you have a Dropbox you can copy your whole site folder into and send me the link, then i could look at it for you.
The image size shouldn't really be a problem.

Tommy Gebru
Tommy Gebru
30,164 Points
Tommy Gebru
Tommy Gebru
30,164 Points

Ok Wayne, so my workspace page is here and the image is available from the web let me check......

Also because the workspace is open I think it is public so long as I don't close my tab, in which case it will be private and closed.

Wayne Priestley
Wayne Priestley
19,579 Points

Tommy, I have the image but i don't have access to your workspace but i can copy your html from your first post.
I'm going to see what i can do with them and i'll let you know.

Tommy Gebru
Tommy Gebru
30,164 Points

Strange I was following someones discussion the other day and they were able to come to a solution in a way that was similar to what I described....

Wayne Priestley
Wayne Priestley
19,579 Points

Tommy, is 500px the max height you would ever need the image?
Is 500px the max height you would want the jumbotron?
Are you using a framework like bootstrap or foundation, is that where you get the name jumbotron from?

Tommy Gebru
Tommy Gebru
30,164 Points
Tommy Gebru
Tommy Gebru
30,164 Points

Maybe, I have no prior experience with either framework the exercise is take from Codecademy similar to Treehouse it has exercises that I follow, I just wanted to save my work as I go along into Workspaces (because its free but also because I need the practice)

Edit: But even at a 1000px my image would still be "chopped off"

Wayne Priestley
Wayne Priestley
19,579 Points

I'm working on it now, could you post your whole css please.

Tommy Gebru
Tommy Gebru
30,164 Points
Tommy Gebru
Tommy Gebru
30,164 Points

Well because I did not continue working (I stopped on the problem) This is what my css looks like

/*Links along the Navigation*/

.nav a {color:#5a5a5a;
        font-size:11px;
        font-weight:bold;
        padding-top:14px;
        padding-bottom:14px;
        padding-left:10px;
        padding-right:10px;
        text-transform:uppercase;
}

.jumbotron {
            height:500px;
            max-width:100%;
            background-image:url('../image/vacation.jpg');
            background-position:center;
            color:#f55;
}