stetim94,
Noted, current directory(.), parent directory(…). The path that uses a single dot is for the other pictures in the image tags and all of those work fine. I’m trying to get the h1 tag in the css file to display the picture in the background. I would like to know what you think my exact file path should be based on my folder structure(win 10 OS)?
i think you where pretty close here:
you just needed to use parent directory, not current directory
stetim94,
I’ve tried (background-image: url("./././image/pattern.jpg"); --current directory
and
(background-image: url("…/…/…/image/pattern.jpg); --parent directory
neither work. what changes would you make at this point?
I keep typing two dots and when I post it adds an additional dot. I tried the parent directory example with two dots not three.
stetim95 & palle0n,
Thanks to both of you for your input! I got it to work after messing with the relative and absolute paths.
Windows file paths are backslashes.
With windows this is what I got to work and also what didn’t work. I tried every possibility of relative vs. absolute paths where the image you are trying to reference via css is in sub folder other than the css file and main html page: reference: http://cwestblog.com/2017/06/16/css-local-file-system-paths-on-windows/
The other alternative is where I got the original answer. If you place the image in the same folder as the css file(styles folder). That isn’t a good answer because you should follow basic web site file structure. reference: https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files
–Matt
thanks that helped me
Hey. I just finished this exercise but the CSS isn’t showing up on the website.
<!DOCTYPE html>
<html>
<head>
<title>Dasmoto's Arts & Crafts</title>
<link href="./resources/css/style.css" type="text/css" rel="stylesheet">
</head>
<body>
<h1>Dasmoto's Arts & Crafts</h1>
<div class="item">
<h2 id="brush">Brushes</h2>
<img src="./resources/css/images/hacksaw.jpeg"/>
<h3>Hacksaw Brushes</h3>
<p>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. <span class="price">Starting at $3.00 / brush.</span></p>
</div>
<div class="item">
<h2 id="frame">Frames</h2>
<img src="./resources/css/images/frames.jpeg"/>
<h3>Art Frames (assorted)</h3>
<p>Assorted frames made of different material, including MDF, birchwood, and PDE. Select frames can be sanded and painted according to your needs. <span class="price">Starting at $2.00 / frame.</span></p>
</div>
<div class="items">
<h2 id="paint">Paint</h2>
<img src="./resources/css/images/finnish.jpeg"/>
<h3>Clean Finnish Paint</h3>
<p>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.<span class="price">Starting at $5.00 / tube.</span></p>
</div>
</body>
</html>
h1,
h2,
h3,
p {
font-family: "Helvetica", sans-serif;
}
h1 {
background-image: url("https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-2/pattern.jpeg");
text-align: center;
font-size: 100px;
color: khaki;
}
.item h2 {
font-size: 32px;
color: white;
}
.price {
font-weight: bold;
color: blue;
}
#brush {
background-color: mediumspringgreen;
}
#frame {
background-color: lightcoral;
}
#paint {
background-color: skyblue;
}
is the <link> good? You could use the network tab in your dev tools (f12) to see if you get 200 for the css file.
so, a 404. Which means the stylesheet isn’t found, which usually mean the path/href of your <link> is not correct.
Thanks. This helped me out also.
