Unable to load background image-Dasmoto's project

Language Help
1

Hello, I’m really sorry I’m asking again on this same topic as others, but even though I read previous answers and tried to do the same, my problem doesn’t get solved.
So, I have an issue loading the background image for my header in the Dasmoto project. I tried changing the path of the url and seeing if there is anything wrong through the inspection tool, but it still does not appear. Can someone please help me get unstuck??? Pleeease…

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dasmoto's Arts & Crafts</title>
    <link href="./css/dasmoto.css" rel="stylesheet">
</head>
<body>
    <header>
        <h1>Dasmoto's Arts & Crafts</h1>
    </header>

css code

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

header {
    background-image: url("/resources/images/pattern.jpeg");
    background-position: center;
}

update:

I finally got it done by right clicking on the image, choosing ‘copy path’ and pasting it within the quotation marks. But it copied the whole route, starting from Users/myname/… etc. Isn’t there a shorter version of the path?

2

Hi, there.

Yes, there would be a shorter path, it all would depend on how your directory is set-up. By the looks of it, it looks like you might have your index.html, a css folder with your .css inside, and a resources folder with another folder holding your images. Looking something like this:

dasmoto v
  |
  resources v
    |
    images v
      |
      pattern.jpeg
  css v
    |
    dasmoto.css
  index.html

If this is the case, you will want to back out of the css folder before accessing the resources folder. Which would be done by doing so:

background-image: url(../resources/images/pattern.jpeg);

If your directory looks different, then there would be some other combo of relative pathing.

3

Yes! Thank you so much, I tried it the way you showed and it got done!

1 Like
4

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.