Background image not showing up. Dasmoto project

Project

I am having trouble getting my background image to show up. I have reviewed the source code and cannot find what I have done wrong.

What am I doing wrong? Why will the pattern image not show up as the background image for the H1?

It will only let me embed one image.

Thanks in advance,

Ken

Hi Ken,
use slashes for the file paths – not backslashes.
Also your relative path is not correct: your style folder is in the same directory as your media folder. That means you need to get out of the styles folder first: ../ .
Then you can enter the media folder: ../media .

4 Likes

hey, I also have a question. how do you get te different

headings in different colors? they always turn in the same colour…

It would depend on your code.

For instance:

        <section class="brushes">
            <h2>Brushes</h2>
            <figure>
                <img src=>
                <figcaption>
                    <h4>Hacksaw Brushes</h4>
                    <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="price">Starting at $3.00/brush</p>
                </figcaption>
            </figure>   
        </section>
        <section class="frames">
            <h2>Frames</h2>
            <figure>
                <img src=>
                <figcaption>
                    <h4>Art Frames (assorted)</h4>
                    <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="price">Starting at $2.00/frame</p>
                </figcaption>
            </figure>
        </section>

There are two sections in this code with two different classes. I can use class targeting to style both of them differently.

section.brushes {
    background-color: rgba(0, 250, 154, 0.2);
}

section.frames {
    background-color: rgba(240, 128, 128, 0.25);
}

Hi, I was just doing this project and I was having the same issue but I had…

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

This wasn’t working then I did…

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

and it worked!!! I don’t understand why my original didn’t work and what the difference is?

Photo below is to show my directory
background-image question

1 Like

This is a relative path starting from where you are (the css file in your CSS folder). It is looking for a Resources folder within the CSS folder.

2 Likes

Thank you so much! I went back and fixed it.

1 Like