Link internally to a background-image

Good evening, all!

I’m wrapping up an introductory HTML/CSS project, and am having trouble linking a div’s background-image to an internal file (it works perfectly when I use an external URL).

Here’s where the pattern.jpg file is stored within the project:
56%20PM

Here’s the HTML:

<div class="banner">
      <header>
        <h1>Dasmoto's Arts and Crafts</h1>
      </header>
    </div>

Here are the two versions of the CSS styling that I tried that didn’t work.

Version 1:

.banner {
  background-image: url("./resources/images/pattern.jpg");
  text-align: center;
  width: 100%;
  margin-top: 15px;
  margin-bottom: 15px;
  padding-top: 10px;
  padding-bottom: 10px;
}

Version 2:

.banner {
  background-image: url("/resources/images/pattern.jpg");
  text-align: center;
  width: 100%;
  margin-top: 15px;
  margin-bottom: 15px;
  padding-top: 10px;
  padding-bottom: 10px;
}

What am I missing here? Thanks in advance for the help!

Hey, your link to the image should be in relation to where your CSS file is stored. In this case, one folder back and then towards the proper folder.

../ gets one you folder back to the project folder
resources/images gets you in the right direction.

background-image: url("../resources/images/pattern.jpg");
1 Like

On your local machine that URL points to the volume root, likely C:\. Use a relative URL as @janneslohmeijer illustrated to access your site folders from within the index.html or style.css files. This makes migration of files much simpler.

2 Likes

Fantastic! Does the same logic apply for navigating:

.../ three folders back
..../ four folders back
etc.?

./folder/file      =>  same directory
../folder/file     =>  one level up
../../folder/file  =>  two levels up

Hey, I’m also having problems with this same exact thing. I even copied the relative path directly from the pattern.jpg on the left side of VS Code, pasted it onto the css code and nothing. Can someone tell me what i did wrong? I’d appreciate the help!

.title{
background-image: url("./images/pattern.jpeg");
font-family: helvetica;
font-size: 100px;
font-weight: bold;
color: khaki;
text-align: center;
}

html:

<div>
        <header>
    <h1 class="title">Dasmoto's Arts and Crafts</h1>
    </header>
</div>

EDIT: I looked opened the DOM(?) on the Codecademy lesson page and coped the link from the image used on the example site, which finally worked. I just don’t understand why my link didnt work?

Hmm. How did you structure your files in this project, @dev4989176394?