Tea Cozy - Backslash vs Forward Slash in Background Image Issue -VSC, Windows

Get Help General Programming
#1

Spent a lot of time tonight trying to figure out why my background image wouldn’t show up.

If I did img src=“sources\img-mission-background.jpg” (relative path copied from Virtual Studio Code) in html, an image would show. But it wasn’t a background image.

If I used background-image: url(‘sources\img-mission-background.jpg’); in css (copying the same relative path using VSC), nothing would show up.

Suddenly just now I get the idea to go into the css and change the backslash to a forward slash and lo and behold my background image showed up.

Does that even make sense? Why did the link work one way for html img src, but I had to change the slash in the relative path for css background-image?

#2

is it because there’s a difference between url and a windows file path?

#3

\ is the escape character, so in order to use backslash in your path, you would need \\. A backslash to escape the backslash you want to use

ideally, use forward slashes (see here). Its easier to read and supported by more operating systems.

1 Like