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 Miriam Allman
Miriam Allman
Courses Plus Student 1,761 Points

my image is missing

I have written the code as follows:

.main-header {
  background-color: #ffa949;
  padding-top: 170px;
  height: 850px
  background-image: url('../img/mountains.jpg');
}

My image file is located in the root directory My Css file is located in the root directory When I refresh my page - I do not see the background image

Christopher Roelle
Christopher Roelle
5,426 Points

If the css and image are both located in the root folder, then "../" goes back a directory, so, if the image is in the folder called img, and the css is located in a folder called css, then the code you wrote should work properly.

Here is the file structure you should have to get this code to work:

root folder{ index.html img{ mountains.jpg } css{ style.css } }

curly braces is what is in the folder. so root has index.html, a folder for css, and the img folder. img folder has jpg image, and css folder has the style.css

11 Answers

Miriam Allman
PLUS
Miriam Allman
Courses Plus Student 1,761 Points
Miriam Allman
Miriam Allman
Courses Plus Student 1,761 Points

Hi Christopher,

My root directory is CSS Basics Inside I have a file called CSS I also have a file called img So what am I doing wrong? The image is still not showing on the page

Christopher Roelle
Christopher Roelle
5,426 Points

Is the image in a folder?

Christopher Roelle
Christopher Roelle
5,426 Points

If the image is in the same folder as the css, then url('mountains.jpg') is the path.

Miriam Allman
PLUS
Miriam Allman
Courses Plus Student 1,761 Points
Miriam Allman
Miriam Allman
Courses Plus Student 1,761 Points

Yes, the image is in a folder called omg

Christopher Roelle
Christopher Roelle
5,426 Points

and the folder for the image is in the root? is the css located in the root or is it in a folder?

Miriam Allman
PLUS
Miriam Allman
Courses Plus Student 1,761 Points
Miriam Allman
Miriam Allman
Courses Plus Student 1,761 Points

sorry - typo - the image is in a folder called omg

Miriam Allman
PLUS
Miriam Allman
Courses Plus Student 1,761 Points
Miriam Allman
Miriam Allman
Courses Plus Student 1,761 Points

the root is called CSS basics inside there are two folders one is called CSS one is called img

Christopher Roelle
Christopher Roelle
5,426 Points

after height: 850px add a semicolon

Miriam Allman
PLUS
Miriam Allman
Courses Plus Student 1,761 Points
Miriam Allman
Miriam Allman
Courses Plus Student 1,761 Points

still doesn't show the background image

Christopher Roelle
Christopher Roelle
5,426 Points

The file is called mountains.jpg? Exactly like that?

Miriam Allman
PLUS
Miriam Allman
Courses Plus Student 1,761 Points
Miriam Allman
Miriam Allman
Courses Plus Student 1,761 Points

exactly - I am stumped

Christopher Roelle
Christopher Roelle
5,426 Points

On the lines of css prior to .main-header's declaration, do you have all the closing curly braces?

Christopher Roelle
Christopher Roelle
5,426 Points
Christopher Roelle
Christopher Roelle
5,426 Points

If you can send the whole css document and I'll look over it.

Miriam Allman
PLUS
Miriam Allman
Courses Plus Student 1,761 Points
Miriam Allman
Miriam Allman
Courses Plus Student 1,761 Points

Here is the whole CSS file

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

*  {
    box-sizing: border-box;
}

body {
  color: #878787;
  margin: 0;
  font: 1em/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
}

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

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

h3 {
  font-size: 1.25em; /* 20px/16px  */
  color: #48525c;
  line-height: 1.2;
  margin-bottom: 1.7em; /* 34px */
}

img  {
max-width: 100%;    
margin-bottom: 20px;    
}
/* Pseudo-classes ------------------ */

a:link {
  color: rgb(255, 169, 73);
  text-decoration: none;
}

a:visited {
  color: lightblue;
}

a:hover {
  color: rgba(255, 169, 73, .4);
}

a:active {
  color: lightcoral;
}

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


.main-header {
  background-color: #ffa949;
  padding-top: 170px;
  height: 850px;
  background-image: url ('../img/mountains.jpg');
  background-size: 40%;
}

.title {
  color: white;
  font-size: 1.625rem; /* 26px/16px */
}

.intro {
  font-size: 1.25em; /* 20px/16px */
  line-height: 1.6;  
}

.primary-content,
.main-header,
.main-footer {
  text-align: center;
}

.primary-content {
    padding-top: 25px;
  padding-bottom: 95px;
}

.secondary-content {
    padding-top: 80px;
    padding-bottom: 70px;
  border-bottom: 2px solid #dfe2e6;
}

.callout {
  font-size: 1.25em;
  border-bottom: 3px solid;
  padding: 0 9px 3px;
  margin-top: 20px;
  display: inline-block;
}

.main-footer {
  padding-top: 60px;
  padding-bottom: 60px;
  border-bottom: 10px solid #ffa949;
}

.t-border {
  border-top: 2px solid #dfe2e6;
}

/* Layout Styles ------------------ */

.primary-content, 
.secondary-content {
  width: 75%;
  padding-left: 50px;
  padding-right: 50px;
  margin: auto;
  max-width:  900px;
}

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

.arrow  {
    width: 50px;
}
Christopher Roelle
Christopher Roelle
5,426 Points
Christopher Roelle
Christopher Roelle
5,426 Points

Remove the space after url, when setting the background in .main-header.

Christopher Roelle
Christopher Roelle
5,426 Points
Christopher Roelle
Christopher Roelle
5,426 Points

new version:

.main-header { background-color: #ffa949; padding-top: 170px; height: 850px; background-image: url('../img/mountains.jpg'); background-size: 40%; }
Christopher Roelle
Christopher Roelle
5,426 Points
Christopher Roelle
Christopher Roelle
5,426 Points

And here is a helpful resource, use this to check CSS for errors, if there are any, it will let you know! :) https://jigsaw.w3.org/css-validator/#validate_by_input