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)
Hi everyone!
I’m excited to say that i’ve completed the Dasmoto’s Arts and Crafts projects after a few minor bumps along the way. How does my code look? 
I just finished this project as well! I got stuck for a while on making the pattern.jpeg the background for the h1 element, but after reading through this forum, I found my answer! After looking at your code vs mine, I see some thing I could have done WAY easier, so thank you and everyone else for sharing!
Thanks, this helped me.
Thank you! This was exactly what I was looking for! I couldn’t manage to make background-image appear using a relative path. I used / and ./ but it was only with the two periods ../ that it finally worked.
1 Like
Hey everyone, I too am having the same issue of the banner image not working right. It displays, so i’m not having any issues with getting it onto my project’s page, and I’ve managed to get the words over it a few times while playing around with the code. My problem is that I can’t figure out how to resize it.
This should be a link to the gist I made https://gist.github.com/PatriciaIsaacs1997/ff89632bc30017bcb224126fc427fb15
I left the img src blank for both the css and html because that is when the code starts not cooperating.
I’ve tried both relative and absolute positioning. Which I manage to get the words on top of the image that way, but any sizing code I add on doesn’t do anything for the image, so I just have about half a page of background image due to that.
I even tried copying the way a few videos on the project shows and still no luck, im pretty lost and want to figure out why I can’t seem to get this to work. I know it’s got to be me forgetting some code, but I tried going back through the cheat sheets on top of looking around at how everyone is doing this project, but I still can’t seem to figure out what I’m doing that’s all that different from everyone else.
Happy coding everyone! Done posting my project, I played a bit on the css and did not follow the real output. Here is my github link:
https://gitdrex.github.io/Dasmoto%20Arts%20&%20Crafts/index.html
Feedback is much appreciated. Thank you.
Hi guys. I am new here. Could you please check my code for the Dasmotos Arts… project?
And something I don´t understand is why on the top of the page, it´s displaying my username, <!DOCTYPE>, and the closing body and html tags at the end of my coding.
Here is my github link: https://elmalicks.github.io/
Thanks in andvance.
It looks like the reason it’s displaying both of those is due to what you have written in the start of your body:
<h1><a href="https://elmalicks.github.io/">ElMalickS</a></h1>
<p><!DOCTYPE html></p>
If you delete those you should be good. Though, it also looks like your username is clickable, so not sure if you wanted the top of the page to link to your github? If so, just removing your username between the anchor tags should leave the link. Otherwise I think you made the page nicely.
1 Like
I absolutely love how you set up the visuals for the project! It looks a lot nicer than the basic layout of the project.
Ok. Thanks @patriciaisaacs1997