Hi, I’m Heather. I’m pretty new to Codecademy and I’m going for the Full-Stack Developer program. So far I’m enjoying it and I feel pretty good about my learning. However, this project has me somewhat stumped. I thought I knew how to link my css sheet to my html file, but it isn’t working. I’m growing frustrated. Can someone please take a look at my html file and see if they can help me figure out what I’m missing/doing incorrectly? At one point I had them linked but I just couldn’t get the pattern image behind the h1. But I’ve deleted everything and started over about 3 times so far so I’m not sure what the differences were between the one that worked and this one. I feel stuck! Thanks in advance for your help!
Hey Heather. Honestly I did not see the problem until I realized that you have it set up as
href="Resources\CSS\index.css">
when it should be
href="Resources/CSS/index.css">
That should fix it. Just mixing up the forward/backward slash. I’ve been there before haha.
Thanks for your quick response. I really appreciate it!
I actually was able to get them linked by using the absolute path instead of relative paths, for some reason every time I c/p a path from my VSC it places the slashes that way. Is there something I can/need to do to change that? I noticed it is backwards but I’m not sure what to do about it.
My CSS file is now linked but I’m still having trouble getting that pattern image behind my h1. This is what I’ve got in my CSS as of now. What am I missing/ doing wrong??
It’s not a very well-crafted project. The course is very guided up until this point, then suddenly throws you into the deep end with little assistance. I know it’s meant to be fun and experimentation, but it’s not.
just ensure you add prettier as an extension in your vs code.
hi all, heres the link to my Dasmoto project. please tell me if it renders properly, i’m not sure if the image files make a difference in GH or not. Thank you! happy coding!
I’m not sure if anybody else has had this strange issue but if you are having issues with the background image not showing up I had a weird issue with when copying the image path it would use \ instead of / for my files path. I have no idea why this was happening but it would load a URL fine but I wasn’t satisfied with 3 file locations, and 1 URL path haha. The fix was after copying the file path I had to go and manually change each \ to a / then it worked fine. Before and after code below
Before
h1 {
font-family: Helvetica;
font-size: 100px;
font-weight: bold;
color: khaki;
text-align: center;
background-image: url(“C:\Users\brand\Desktop\vscodefiles\Dasmoto\Images\pattern.jpg”);
// ^ ^ ^ ^ ^ ^
}
After
h1 {
font-family: Helvetica;
font-size: 100px;
font-weight: bold;
color: khaki;
text-align: center;
background-image: url(“C:/Users/brand/Desktop/vscodefiles/Dasmoto/Images/pattern.jpg”);
// ^ ^ ^ ^ ^ ^
}
I only barely noticed this after staring at it forever and I noticed the yellow highlight and remembered that while going through the JavaScript course the \ was used when you’re trying to have a string with " inside it for a quote and you want the " to be ignored and the string continue. Figured that might be affecting the rest of the file path to cause an error, but no debug error was popping up so it was a wild guess but it worked! Hopefully if anybody else has this odd issue this helps! 
1 Like
So the problem especially if you have this folder structure:
is that in order to set the CSS background-image url path, you have to go up in your folder structure. How I solved this is:
h1 {
background-image: url("../images/pattern.jpeg"); /* use ../ to go to parent directory */
width: 100%;
}
I had to use …/ in order to go up into the resources folder, and then I could continue down my folder structure to the images folder, and finally into the the pattern.jpeg image file.
1 Like
I think the issue is one that is not so well told on the project itself. I was doing the same thing moments ago.
You have to have the …/ on the front of the source of the picture. (it is because your CSS file is in the CSS folder. the “…/” takes you “backwards” to the resources folder and then it will find the “images”-Folder correctly.
meaning like this background-image: url("…/images/pattern.jpeg)