0

I'm working on a project in Atom with atom-live-server. I have a header, with a background image behind the text. The live server is not rendering the image, while Chrome renders the image fine.

Is there a distinct difference between live-server and browsers that I should now about? I find it strange that it's not working consistently across the server and browser.

HTML:

<h1 id="header">Dasmoto's Arts & Crafts</h1>

CSS:

#header{
  font-family: Helvetica;
  font-size: 100px;
  font-weight: bold;
  color: khaki;
  text-align: center;
  background-image: url("/Users/Elijah/Desktop/HTML_Projects/Dasmoto/Resources/images/pattern.jpeg");
}

Also, when I change the URL to the below code, it works fine. Does it have anything to do with local files?

background-image: url("https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-2/pattern.jpeg");
CSS:
etkerns
  • 1
  • 1
  • Does your server have the following folder structure? `/Users/Elijah/Desktop/HTML_Projects/Dasmoto/Resources/images/`. Almost guaranteed to be **NO**. – Lee Taylor Jul 18 '22 at 13:48
  • 1
    Good point. After you say that it feels like it should have been obvious. I used the relative file path and I got it to work. I need to dig into that area some more. Thank you! – etkerns Jul 20 '22 at 00:46
  • No problem! Glad to have helped. – Lee Taylor Jul 20 '22 at 00:59

0 Answers0