Dasmoto's Arts & Crafts


#1

Hi,

I am going through the Web Development Path. In the Dasmoto’s Arts & Crafts project I was given a spec sheet of what the project should look like:

I don’t know how to put the pattern.jpg image background behind the project title. I have tried doing inline style’s with the background and the background-image property. Neither worked. I done so with a css declarations. Maybe someone else has struggled through this and was successful. Any help is appreciated!

Here is my CSS:

a{
font-family: helvetica;
font-weight: bold;
color: blue;
}
h1 {
background: url(“C:\Users\Matthew.Slone\Source\repos\codecademy\dasmotos arts & crafts\images\pattern.jpeg”);
font-family: helvetica;
font-weight: bold;
text-align: center;
font-size: 100px;
color: Khaki;
}
h2{
color: white;
font-size: 32px;
font-weight:bold;
font-family: helvetica;
}
h3{
font-size: 20px;
}
h2, h3, p{
font-family: helvetica;
}

Here is my local file path:

Repos

  1. codecademy
    2) dasmoto’s arts & crafts
    3) images
    4) finish.jpg
    4) frames.jpg
    4) hacksaw.jpg
    4) pattern.jpg
    3)scripts
    3)styles
    4) site.css

-Matt


#2

Hey!
From what you’ve provided i could say that problem might be in the CSS background spelling.
You doing it through CSS file, that’s correct! But something wrong with property.
Also! You don’t have to type the whole path to the document, if you place all project files in one folder! :slight_smile:


#3

Here is my html:

Dasmoto's Arts & Crafts

Dasmoto's Arts & Crafts

Brushes

Hacksaw Brushes

Made of the highest quality oak, Hacksaw brushes are known for their weight and ability to hold paint in large amounts. Available in different sizes. Starting at $3.00 / brush.

Frames

Art Frames (assorted)

Assorted frames made of different material, including MDF, birchwood, and PDE. Select frames can be sanded and painted according to your needs. Starting at $2.00 /frame.

Paint

Clean finish Paint

Imported paint from Finland. Over 256 colors available in-store, varying in quantity (1 oz. to 8 oz.). Clean Finnish paint microbinds to canvas, increasing the finish and longevity of any artwork. Starting at $5.00 / tube.


#5

You can set background image in various ways, but best is to do it in CSS file.
My best guess here is that path to the file is incorrect.

If all your files in one folder, just type files name url(“example.jpeg”)


#6

In my CSS file I have tried the following based on the file path(also tried this with background-image):

background: url("…/…/images/pattern.jpg");
background: url("…/…/…/images/pattern.jpg");
background: url(“pattern.jpg”);
background: url("/images/pattern.jpg");

What do you recommend given the file path via the screenshot I included?


#7

Move all the images from “images” folder to “styles” folder, so all website files are in one place.
After that, you can use background: url(“imagename.jpg”) to access the file
Also, i was wondering about one related question, just useful link :slight_smile:


#8

palleOn,

Thank you, moving the images into a folder called “styles” worked! I’m not sure why moving that image to the styles folder worked. I think it would be helpful for other people completing this project to understand why you need it in the styles folder?


#9

I disagree, i think you should have separation of content.

Are you using Windows OS? Windows uses backslashes in path, and parent directory is double dot (..) not triple


#10

stetim94,

I am using Windows OS.
I have tried two dots and backslashes as well. Based on my file path in the following picture what would you say the file path should be? (NOTE: I have returned the pattern.jpg file to the images folder as before in order to keep separation of concerns in content based off of this reference (https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files) :

What file path would you recommend? Also, the current file path in the picture does not work.


#11

Try rereading this exercise: https://www.codecademy.com/paths/web-development/tracks/styling-a-website/modules/learn-css-selectors-visual-rules/lessons/css-visual-rules/exercises/background-image
I’ve done like they said here and it worked


#12

the current file path you use a single dot (.) which means current directory. Understand what current directory (.) and parent directory (..) are is quite useful.


#13

@palle0n, 30matt30 is trying to make the project work on his local machine with windows OS, while the course runs a linux server, so the file paths are not compatible.


#14


In my case, all project files are in “TestWebsite” folder as parent
I also created “Images” folder inside “TestWebsite” folder, to separate the content.
It works, as they said in the exercise
Windows 10


#15

from vscode github:

https://github.com/Microsoft/vscode/issues/6308

so yea, forward slashes might work, but its not without risk on a windows machine which uses backslashes in path. It can be a very annoying bug to find if things go south


#16

i changed forward slashes to backslashes for HTML file, it worked perfectly. I literally replaced forwardslash with backslash.
but css broke down, doing the same thing, :confused:


#17

I’m not sure that we can use backslash for paths in CSS at all


#18

is the browser then doing the conversion? Because Windows paths use backslashes. Haven’t programmed on windows in a while, i do everything on linux.


#19

I don’t know yet, googling intensifies


#21

You can use “\\” instead of “\” in your filepath if you want.


#22

On Stackoverflow they answered that it’s ok to use " / ", but i think more research needed.