Dasmoto help

Hello all!

I have run into an issue with bringing in the background picture for the H1 heading and I am not sure if it is something I am missing in my coding, or something with Virtual Studios Code. I added a background color to show that the code would work in the space I need it to, but without the color, the background is white and will not pull in the image.

I do have the image in my Dasmoto folder >> resource >> images folder with the other images I attached as you can see in the photo. When so I can open up the images directly in Virtual Studios Code, but when I try and open it from the css image link, it says the image cannot be found.

Can someone take a look and see what I am doing wrong as I have tried several variations. I would appreciate any insight.

HTML

Dasmoto's Arts and Crafts
<link href="resources/css/index.css" type="text/css" rel="stylesheet"/>

Dasmoto's Arts & Crafts

<!--Start class products to group brushes, frames, and paint ids-->
<div class=" products">
<div id="brushes">
    <h2>Brushes</h2>
    <img src="resources\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 id="frames">
    <h2>Frames</h2>
    <img src = "resources\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 id="paint">
    <h2>Paint</h2>
    <img src="resources\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>
</div><!--end class products-->

CSS

h1 {
text-align: center;
font-family: Helvetica;
font-size: 100px;
font-weight: bold;
color: khaki;
background-image: url(“resources\images\pattern.jpeg”);
background-color: black;

}

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

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

.products{
display: block;
position:absolute;
width: 100%;
}

#brushes {
background-color:white
}

#brushes h2{
background-color: mediumspringgreen;
}

#frames h2{

background-color: lightcoral; 

}

#frames{
background-color: white;
}

#paint h2{

background-color: skyblue;

}

#paint{
background-color: white;
}

Hi there!

Welcome to the forums.

For your file tree, do you have your .css file in its own directory? For example:

root
   v resources
      > images
      v CSS
         style.css
   index.html

If the image is being accessed from style.css and not index.html, the pathing would need to be corrected.

From index.html, you access the resources folder and then the images folder. But from the style.css file, you need to back out of the CSS folder and then access the images folder.

So, instead of url(resources/images/pattern.jpeg) it would need to be url(../images/pattern.jpeg)

1 Like

I have my css folder and image folder inside of the resources folder. Is this wrong? Does the css folder need its own image folder to pull from? I wouldn’t think it would as long as it can be retrieved. I’ve tried different url variations with the same outcome, including the full path and relative path.

Your file tree is fine! I’ve seen all sorts of structures.

But yeah, as I stated above

../images will back you out of the CSS folder and into the resources folder. Then you can access the images folder.

Thank you, I did change it to that and now it is showing when I click on the url within the program. However, still not showing up on the browser.

Have you fixed the background yet?

If not, can I see the updated CSS?

Hi, I have not. I looked at the solution code to try and figure out what I am doing wrong, but still am unable to see much of a difference in the h1 element that would prevent it from showing. I got rid of some of the unnecessary elements, thinking that may be the cause, but still can’t seem to get the background to show. I can now ctrl+click on the image url and it shows in my workspace after changing it as you suggested.

Here is the updated code:

h1 {
background-image: url(‘…\images\pattern.jpeg’);
text-align: center;
font-size: 100px;
color: khaki;
font-family: “Helvetica”;
}

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

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

#brushes h2{
background-color: mediumspringgreen;
}

#frames h2{
background-color: lightcoral;
}

#paint h2{
background-color: skyblue;
}

By the looks of things, it’s the correct pathing. Could you try changing the backward slashes ( \ ) to forward slashes ( / )?

Oh wow, that was it! Thank you so much for your help, great catch!

1 Like