Search code examples
htmlcssbackground-image

Loading background image relative to website location

I am currently building my own webpage and right now, it looks like that.

enter image description here

The goal is to have the wide header background image load relative to the document path:

The container for the Image looks like this:

<header style="background-image: url('../../images/header.jpg');">
  <!-- Header Content --> 
</header>

I have also tried the following way with the same result:

<header style="background-image: url('/images/header.jpg');">
  <!-- Header Content --> 
</header>

The structure of the site is like the following:
enter image description here

My idea is to put the header image for each page into a relative "images" folder.

The issue is: Every subpage loads the header image from the root directory. How would I best go about this?

Solution

  • If your HTML document is inside the "articles" folder, the URL for the background image should be url('images/header.jpg') – in this case the "images" folder is at the same level as the HTML document, so no slash in front of it.