Dasmoto's Art's & Crafts Pattern Background

Hello everyone,

I’ve been doing the Dasmoto’s Art’s & Crafts project, however I’m a little stuck.

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.

Can anyone provide a suggestion for whatever I’ve missed?
Thank you in advance.

I assume you have the image in the same folder as your css and html.

You are missing " " around the link as in url(“pattern.jpeg”)

Also try assigning it to the background-image attribute rather than background

1 Like

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.

1 Like

Could you show me your html? In code using the </> button

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>

Ah now I see what is going on :wink: .

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>

Now in your CSS you style it using:

header {
    background-image: url(“pattern.jpeg”);
}

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. :thinking:

Perhaps I’m just doing something silly still, if I could ask to borrow your eyes one more time :sweat_smile:

My HTML is here:

<!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>
rest of content

And my CSS is here:

h1 {
	font-family: Helvetica;
	font-size:100px;
	font-weight:bold;
	text-align:center;
	color:khaki;
}

header {
		background-image: url("pattern.jpeg");
	
}
rest of CSS document.

Thanks again.

Please post all of your code I’ll have a look into it this afternoon.

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>

CSS:

h1 {
	font-family: Helvetica;
	font-size:100px;
	font-weight:bold;
	text-align:center;
	color:khaki;
}

header {
		background-image: url("pattern.jpeg");
	
}

h2 {
	font-family:Helvetica;
	font-size:32px;
	font-weight:bold;
	color:white;
}

a {
	font-family:Helvetica;
	font-weight:bold;
	color:blue;
}



#brushes {
	background-color:mediumspringgreen;
}

#frames {
	background-color:lightcoral;
}
	
#paint {
	background-color:skyblue;
}

Once again, thank you very much.

Your code overall seems to be ok. Where is your image stored in relation to the 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. :thinking:
Not sure if that helps?

For the record, the quotes are not needed in CSS.

url(no_quotes_around.png)

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.

2 Likes

Years ago I adopted creating a skin folder inside the css folder.

> index.html
+ styles/
    > style.css
    + skin/
        > pattern.jpg

CSS

header {
    background-image: url(skin/pattern.jpg)
}

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!

1 Like

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:
image

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.

Hence, my code looks like this:

header {
    background-image: url(../images/pattern.jpeg);
}
4 Likes

Had the same issue myself.

This was the solution I needed.

Thank you!

1 Like

This was super useful - cheers. And also now makes total sense since I completed the command line section:-)

1 Like

Three years after the original post, I was stuck on the exact same issue - this solution worked perfectly to correct my code. Thank you!!

1 Like