Dasmoto’s Arts & Crafts - Background Image

Projects Off-platform Practice Projects
#1

I’m having issue with the background image in the Dasmoto’s Arts & Crafts project.

The ‘pattern’ background image isn’t visual, only the text ‘Dasmoto’s Arts & Crafts’ can be seen.

I’ve tried a number changing the code many times now, but nothing seems to work.

Anyone know what I’m missing? Below is my HTML and CSS code. Thanks!

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" type="text/css" href="./Resources/CSS/index.css">
    <title>Dasmoto's Arts & Crafts</title>
</head>

<body>

    <h1>Dasmoto's Arts & Crafts</h1>

        <div class="Brushes">
            <h2>Brushes</h2>
            <img src="./Resources/Images/hacksaw.jpeg" alt="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.</p>
            <p class="blue">Starting at $3.00/brush</p>
        </div>
        <div class="Frames">
            <h2>Frames</h2>
            <img src="./Resources/Images/frames.jpeg" alt="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.</p>
            <p class="blue">Starting at $2.00/frame.</p>
        </div>
        <div class="Paint">
            <h2>Paint</h2>
            <img src="./Resources/Images/finnish.jpeg" alt="Finished">
            <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.</p>
            <p class="blue">Starting at $5.00/tube.</p>
        </div>
</body>

</html>


h1 {
	background-image: url("Resources/Images/pattern.jpeg");
    font-family: Helvetica;
	font-size:100px;
	font-weight:bold;
	text-align:center;
	color:khaki;
}

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

.Brushes h2 {
background-color: mediumspringgreen;

}

.Frames h2 {
    background-color: lightcoral;
}

.Paint h2 {
    background-color: skyblue;
}

.blue {
    font-family: Helvetica;
    font-weight: bold;
    color: blue;
}
#2

In your html, I see the file path ‘./Resources/Images’:

In your CSS file in the h1 background definition, I see the same path:

The link tag tells me that you have a separate directory for your CSS file:

So your path in the CSS file needs to be corrected.

#3

I have corrected the path several times, copying the path and the relative path, but it still doesn’t work.

#4

Then please post a screenshot of your file structure and your h1 style declaration.

#5

F2487EA3-657A-4620-B04D-771E63C19478
F2487EA3-657A-4620-B04D-771E63C194781920×1200 135 KB

h1 {
background-image: url("./Resources/Images/pattern.jpeg");
font-family: Helvetica;
font-size:100px;
font-weight:bold;
text-align:center;
color:khaki;
}

Thanks!

#6

This needs to be corrected:

Your html file is in the root directory. So these file paths (in your html file) are correct:

<link rel="stylesheet" type="text/css" href="./Resources/CSS/index.css">
...
<img src="./Resources/Images/frames.jpeg" alt="Frames">

This is not (in your css file):

background-image: url("Resources/Images/pattern.jpeg");

It is a relative path and assumes that in your CSS folder you have another folder called ‘Resources’ and a subfolder ‘Images’. That is not the case.
You need to get up one level and then get into the images folder. You get one level up with two dots.
So this is your file path for your css background-image:

background-image: url("../Images/pattern.jpeg");

PS: It’s a common practice to use lower case for the file and folder names.

2 Likes
#7

Ah thanks. It works now. I’ll have to correct my file and folder names as well :grinning:

1 Like