Paths

[sUMmermixon]

Having trouble with the hero-image. Is my path correct?

[CEFSTUDIO]

I don't believe you need the "." in front of your path. I believe it should be- background-image: url("/images/mom_boys.jpg");

This assumes the image is in the images folder- which it appears to be.

https://css-tricks.com/quick-reminder-about-file-paths/

Helpful reading- I was in this class awhile ago but I guess I was still subscribed to the forum. Might as well help.

[JonSwallow]

Hey Summer try ("images/mom_boys.jpg")
I haven't started yet but I was just going over one from last semester I had used a separate folder for css but since it is in the same folder you should not need the period before it.

[sUMmermixon]

@CEFSTUDIO Thank you! @JonSwallow Yay I'm so happy you are in this class with me too!!

... I will give this a shot.

[JohnYingling]

Hi @JonSwallow! :D Be prepared for more panic-stricken issues board posts from me this semester! Heh.

[JonSwallow]

Hey @ John Yingling, you may be helping me this semester!!

[michaelmusick]

We will all be helping each other. And it will be great!

[JakeTheFlare]

Like @CEFSTUDIO said, the "." at the beginning isn't necessary. In fact, you may not need that "/" at the beginning either (try experimenting with that).

[michaelmusick]

OK, got some things for you.

With regard to paths: when a path starts with a single ., it is explicitly telling the compiler to start in "this directory". This is optional, although I tend to include them, as it is a visual cue to me and other developers that the path starts from this directory. When you do not prepend your path with a ., you should instead start with the directory you are moving to. (i.e. MyNewDirectory/rest-of-path) and not start with a slash, as this tells some compilers to start "at the top of the path". So, as far as I am aware, and my testing seems to support, your CSS path should either be href="HW-1/style.css" or href="./HW-1/style.css". I will continue to use the latter in my examples, you are free to use either.

With regard to your hero-image linking problem. Unfortunately, you spelled "background" wrong in line 11. You have; backround-image: url("/images/mom_boys.jpg"); It should be background-image: url("./images/mom_boys.jpg");

Another problem is with the size you assign to the .hero-image class. We cannot use "relative heights" for background images, as the HTML engine will collapse the element if it has no "text contents". So we have to use a true height of somesort. I would suggest "viewer height" (vh). So change line 12 to height:100vh;.

(NOTE: I would suggest everyone reading this post also reads through this CSS-Tricks post on view height. https://css-tricks.com/fun-viewport-units/ )

Finally, as a last note, your line 1 is superfluous and may cause errors. We do not declare "doctype" in CSS, as there is no doctype. That is a HTML specific requirement. Since there are multiple versions of HTML (i.e. XHTML HTML1.0, etc) we must declare the doctype for browsers to be sure of which to use.

So, your updated style.css should be something like;

body {
  height: 100%;
  background-color: black;
  color: white;
  padding: 0;
  margin: 0;
}

.hero-image {
  background-image: url("./images/mom_boys.jpg");
  height:100vh;
  background-position: center;
  background-repeat: no-repeat;
  background size: cover;
  position: relative;
}

.hero-text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transfrom: translate (-50%, -50%);
  color: white;
}

Let me know if that all works or not?

[sUMmermixon]

I tried all the ways to connect a path, image does not show up. I tried the above from @michaelmusick , it still doesn't show up. Its going to be a very rough for page unfortunately :(

[CMHauge]

@sUMmermixon Is it just the image that's not showing up? I'm curious, is the rest of your css working? Because the only other thing I could think of for why it wouldn't be displaying the image is if your css isn't linked in your html properly. If it is, then I'm not sure what the problem is, but I thought I'd throw that out there!

[sUMmermixon]

@CMHauge its JUST the image.

[CMHauge]

@sUMmermixon That's so weird. I don't suppose it would have anything to do with background size not having a dash? In the image it's background size rather than background-size . Unless that was also fixed? I'm so confused as to how it's not showing up. Strange!

[sUMmermixon]

@CMHauge Good catch! It still doesn't work! The image doesn't show in HTML either, so I'm wondering if the image is somehow corrupted? I'm going to try a different one. Thanks everyone for all the help!

[michaelmusick]

I believe your image is not showing up because you are missing a semicolan at the end of line 36. Once I fixed this, your image shows up for me

[michaelmusick]

Perhaps you could swing by my office hours? I want to work through some linking issues with you.