Url() relative path to apply image to background

HTML-CSS
1

Hello,

I was trying to use the url() function in css to add a background to an element. However, I don’t fully understand how the relative path works. It seems to work with “…/images”, “./images” and “images” as if they are all the same. I thought the “…/images” would go up one level in the directories, but it doesn’t.

So how does the relative path works with the url function? Does it take the directory where index.html is as base directory for the relative path? Why “…/images” and the other two work exactly the same?

Thanks.

2

Do you have a repo for what you are trying to do? That might make it easier to help you.

3

I´m following a tutorial to make a Netflix clone.

The original code is this (not mine):

Line 7.

4

Right, please create a repo with your files so we can figure out what is going on in the overall structure.

5

Here you go:

It´s line 7 as well.

1 Like
6

OK, I think I see what you mean now.

It seems to work with “../images”, “./images” and “images” as if they are all the same.

Yes, that is odd behavior. I also notice that this:

export const Background = styled.div`
  display: flex;
  flex-direction: column;
  background: url(${({ src }) =>
      src ? `../../../../images/misc/${src}.jpg` : "../../../../images/misc/home-bg.jpg"})
    top left / cover no-repeat;
`;

works just fine.

I’m guessing what is happening is that you cannot go above the public folder - that is kind of the point of it. So, I would guess that it just ignores anything that takes you below the public folder - because you’re not allowed to go there.

It’s not ignoring the “..” because this:

export const Background = styled.div`
  display: flex;
  flex-direction: column;
  background: url(${({ src }) =>
      "images/../misc/home-bg.jpg"})
    top left / cover no-repeat;
`;

that would evaluate to /misc/home-bg.jpg.

But this does:

export const Background = styled.div`
  display: flex;
  flex-direction: column;
  background: url(${({ src }) =>
      "images/../images/misc/home-bg.jpg"})
    top left / cover no-repeat;
`;

We go into images, back up one (to the root public folder) but then do images/misc/home-bg.jpg.

So I guess it will allow you to back up a level (..) as long as you don’t go below the root public folder - it just seems to ignore anything that does that.

Just to confirm that, this works:

export const Background = styled.div`
  display: flex;
  flex-direction: column;
  background: url(${({ src }) =>
      "images/../../../images/misc/home-bg.jpg"})
    top left / cover no-repeat;
`;

I don’t know where that behavior is documented, but that seems to be what it is doing. And it does kind of make sense.

1 Like
7

Thanks, @kevinSmith.

This whole thing is odd, and was driving me crazy. And on top of that, I was not able to find information regarding this on the internet. But you clarified it for me :grinning:

1 Like
8

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