How come this didn't work? (Dasmoto's Arts & Crafts)

Get Help CSS
,
#1

Hi everyone, I just completed the off-platform project, ‘Dasmoto’s Arts & Crafts’ from my laptop.

In this project, you just have to re-create a webpage following these specs and the images provided. I created my directories, saved the images locally, and didn’t have any problems getting through it – except when I was trying to add the background image to the top banner.

Taking a peek at the Inspector, I saw that the background image was added in with ‘background-image: url()’ under the h1 rule of the style.css file, so I wrote out background-image: url("./resources/images/pattern.jpeg");

For the other images, I put them into the HTML file directly using img src="" (e.g. …"./resources/images/hacksaw.jpeg">

The images inserted this way in HTML showed up no prob, but the one in CSS (the h1 background image) didn’t. I worked around it by using the direct link from Codecademy’s source code instead, but this doesn’t get around how I was supposed to make this entire project locally and offline, from my laptop.

TL;DR why didn’t the background image show up when I wrote in the code in CSS like it did with HTML?

#2

Hey, I may have found the problem but can you show your CSS and HTML just to be sure ?

#3

Sure, the CSS file looks like:

h1,

h2,

h3,

p {

font-family: Arial, Helvetica, sans-serif;

}

h1 {

color: khaki;

font-family: Helvetica;

font-size: 100px;

font-weight: bold;

text-align: center;

background-image: url("https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-2/pattern.jpeg");

}

h2 {

color: white;

font-family: Helvetica;

font-size: 32px;

font-weight: bold;

}

h3 {

font-weight: bold;

}

p {

font-size: 16px;

font-weight: 400;

}

#brush {

background-color: mediumspringgreen;

}

.price {

font-family: Helvetica;

font-weight: bold;

color: blue;

}

#frame {

background-color: lightcoral;

}

#paint {

background-color: skyblue;

}

I can’t share the HTML because it just formats my post. ‘Create a Codebyte’ function doesn’t work either, looks like I’m bad at posting to the forums in addition to coding…

#4

Hi, I looked at your code. The only thing I can see is that I noticed the CSS examples all used single quotes instead of double quotes, like in the HTML. Maybe try single quotes in CSS around your local file. Hope that helps. :grinning:

#5

I did notice and try that too, but the single quotes vs double quotes didn’t make a difference T_T thanks for taking a look anyway!

1 Like
#6

I had this issue with the background image for the banner. The issue I had was I didn’t save the image in the same folder as my CSS file (I had it in the folder above it). Once I moved the image file to the same folder as my CSS it worked.

#7

It’s been sixteen days since I tackled this project so I’ve forgotten about it, but looking at your reply, I think that was probably it.

Thanks for making your first post in the community a helpful answer to my query!