Tea Cozy Project: pictures won't load

The background pictures for the mission and location sections won’t load. I’ve tried re-writing the code, using a different coding platform, and loading it in a different browser. I’ve also checked it carefully against the Codecademy code in the lesson and haven’t been able to find the problem. If you see what I’m missing, please tell me. I’m stuck.
Here’s the code (CSS):

/* Universal Styles */

body {
  font-family: Helvetica, sans-serif;
  font-size: 22px;
  color: seashell;
  background-color: black;
  text-align: center;
  margin: 0;
}

a {
  color: seashell;
}

h2,
h3,
h4 {
  margin: 0;
  padding: 10px;
}

.flex-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

header {
  height: 69px;
  border-bottom: 1px solid seashell;
  position: fixed;
  z-index: 1;
  width: 100%;
  background-color: black;
  align-items: center;
}

header .logo {
  height: 50px;
  padding-left: 10px;
}

nav {
  text-align: right;
  flex-grow: 1;
}

nav span {
  display: inline-block;
  padding: 20px 10px;
}

.main {
  padding-top: 69px;
  opacity: 0.9;
  width: 1200px;
  margin: auto;
}

#mission {
  background-image: url(./resources/media/img-mission-background.jpg);
  height: 700px;
  padding-top: 70px;
}

#mission .content {
  margin: auto;
  background-color: black;
  width: 100%;
}

#store {
  height: 700px;
  width: 1000px;
  padding-top: 70px;
  margin: auto;
}

.item {
  padding: 5px;
}

.item img {
  height: 200px;
  margin: 10px;
  display: block;
}

.item span {
  display: block;
  padding: 5px;
  font-weight: bold;
  text-align: center;
}

.flex-container .locations {
  padding-top: 5px;
}

#locations {
  background-image: url('./resources/media/img-locations-background.jpg');
  background-position: center;
  height: 500px;
  padding-top: 70px;
  z-index: 1;
}

#locations .flex-container {
  margin: auto;
  width: 1100px;
}

.location {
  opacity: 1.0;
  padding: 10px;
  margin: 5px 20px;
  background-color: black;
  flex-basis: 280px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.contact {
  height: 200px;
}

footer {
  padding-left: 20px;
  float: left;
}

background-image: url(./resources/media/img-mission-background.jpg);
background-image: url('./resources/media/img-locations-background.jpg');

You have to target where they are in your file system. To troubleshoot, it’s helpful to view the source in your browser, then click on the css file link and if it gets an error it will show you the path that the browser tried. For example: Firefox can’t find the file at view-source:file:///Users/myUserName/JavascriptStudy/css/styles.css. This will clarify for you if you’re aiming at the completely wrong folder.

To find the path of your css file if it’s in doubt, you can right-click it in your finder and click on “get info” on mac. On windows… I’m not sure but it shouldn’t be a complicated thing (google is your friend here).

Consider these:

    /   = root directory
   ./  = current directory
   ../ = Parent of curr. directory
   ../../ = parent of parent

You can do a command+shift+r (or control+shift+r in windows) to do a hard rest on the browser in case it doesn’t take in your new path.


Example:

Let’s say the resources folder is in myWebpageFolder, and myWebpageFolder is in Documents.

  • background-image: url('./resources/media/img-locations-background.jpg')

will target myWebPageFolder/resources/media/img-locations-background.jpg


  • background-image: url('../resources/media/img-locations-background.jpg')

will target Documents/myWebPageFolder/resources/media/img-locations-background.jpg

1 Like

It worked! I used ../../ to go back to the right folder and the images finally loaded. Thank you so much!

1 Like