It’s been a breeze up to this point, and I’ve done everything, but I can’t get the pattern background to work for the main header. I’ve double checked the link, I’ve also tried to see if a link using another image from the same folder would work but it didn’t, and I’ve moved folders around and put the images into the same folder with the style sheet, and corrected the links but I still can’t get this to work.
Thank you for your quick reply, I wasn’t expecting such a quick response.
I’ve changed background back to background-image, and good eye, I didn’t realise I’d missed the " " for the URL, but unfortunately no luck.
The images are currently saved in the same folder as the style sheet locally to prevent any file routing issues.
I didn’t realise I could do that, thank you.
Thank you again for getting back to me so quickly.
<!DOCTYPE html>
<html>
<head>
<link href="resources\styles\index.css" type="text/css" rel="stylesheet">
<title>
<div>
<h1 id="title">Dasamoto's Art's & Crafts</h1>
</div>
</title>
<body>
<h1>Dasamoto's Art's & Crafts</h1>
<h2 id="brushes">Brushes</h2>
<img src="resources/styles/hacksaw.jpeg" alt="An image of a set of brushes.">
<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.<a href="link">Starting at $3.00 / brush.</a></p>
<h2 id="frames">Frames</h2>
<img src="resources/styles/frames.jpeg" alt="An image of colourful frames.">
<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. <a href="link">Starting at $2.00 / frame.</a> </p>
<h2 id="paint">Paint</h2>
<img src="resources/styles/finnish.jpeg" alt="An image of a set of paints.">
<h3>Clean Finnish Paint</h3>
<p>Imported 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 work. <a href="link">Starting at $5.00 / tube.</a></p>
</body>
</head>
</html>
You have your HTML structure set up wrong in combination with assigning the background-image attribute to an element that cannot be styled.
First.
You <head> section always goes before your <body> element.
<head>
....
</head>
<body>
....
</body>
The title is part of the head and can have no styling since the head has no styling. The head is only there to tell the browser information about the page such as title, favicon (the little image in the tab on your bowser) and the link to stylesheets etc.
Your title element should be something like this:
<title>Dasamoto's Art's & Crafts</title>
Now to where to put the background image?
HTML knows an element called header which you can put inside the body as your first element. Sorry for the confusion as it looks like the head element. Anyways.
What you can do is the following:
<body>
<header>
<h1 id="title">Dasamoto's Art's & Crafts</h1>
</header>
..... the rest of your page content
</body>
Thanks for that, I must have been very tired to make such a simple mistake with the head element.
I’ve cleaned up my HTML and tried your suggestion but still no luck.
Perhaps I’m just doing something silly still, if I could ask to borrow your eyes one more time
Thank you very much. There’s no rush so don’t worry about when you get back to me.
HTML:
<!DOCTYPE html>
<html>
<head>
<link href="resources\styles\index.css" type="text/css" rel="stylesheet">
<title>Dasamoto's Art's & Crafts</title>
</head>
<body>
<header>
<h1 id="title">Dasamoto's Art's & Crafts</h1>
</header>
<h2 id="brushes">Brushes</h2>
<img src="resources/styles/hacksaw.jpeg" alt="An image of a set of brushes.">
<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.<a href="link">Starting at $3.00 / brush.</a></p>
<h2 id="frames">Frames</h2>
<img src="resources/styles/frames.jpeg" alt="An image of colourful frames.">
<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. <a href="link">Starting at $2.00 / frame.</a> </p>
<h2 id="paint">Paint</h2>
<img src="resources/styles/finnish.jpeg" alt="An image of a set of paints.">
<h3>Clean Finnish Paint</h3>
<p>Imported 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 work. <a href="link">Starting at $5.00 / tube.</a></p>
</body>
</html>
The files are two folders down in a “styles” folder.
Those images load onto the web page no problem.
With you saying that, I just tried to display the image using the HTML and it worked fine so it doesn’t seem to be a problem with the file.
Originally the CSS, was in a separate folder to the images and I was pointing to them like I was in my HTML with a slightly different file path to reflect this, and had the same problem.
Not sure if that helps?
is perfectly valid. This dates all the way be to IE5.2 for Mac. It had a bug as I remember, and could not deal with the quotes so they were dropped from the specification to accomodate the bug. Yes, it did rank as a hack, at the time, but since then I’ve never used quotes with no issue.
If you have robots.txt file on the server (web server, that is) robots can be restricted from crawling the skin folder so those images don’t get indexed.
Images that are embedded using the img tag are tracked down by robots and may find their way into the index.
Many moons later, I am here with the same problem. Spent much time tonight trying to get the pattern to show up as a background image on my header bar like the example website.
I could get the image to print using and then the relative path like I did with the others from my index file.
I could get a background color to show.
I could not get the requested background image to show up using the relative or complete path from either the index.html or the index.css using multiple tags and ids etc…
I DID eventually get the image to show up by using the complete path on the codecademy example, at amazonaws.com.
So, #title {
font-family: Helvetica;
font-size: 100px;
font-weight: bold;
color: khaki;
text-align: center;
background-image: url(https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-2/pattern.jpeg);
}
… that worked fine.
But trying to get it using
background-image: url(G:\CodingProjects\DasmotoArts\resources\images\pattern.jpeg);
…did not work.
PERPLEXING!
I was having the same issue and realized that my “index.css” file was stored in a “css” folder under “resources”.
Within “resources” I have an “images” folder with the “pattern.jpeg” file stored:
When referencing the “pattern.jpeg” file I need to go a folder UP in order to get to my “images” folder. Therefore, when referencing this file in css I had to add “…/” in the beginning (this will be learned in the command line course later on). I also noticed that I need to use a forward-slash “/” when referencing a file path in the background-image url instead of a Backward slash.