Electron

CSS – Local File System Paths On Windows

When working with Windows you probably have noticed that local file paths use the backslash as the path separator. Although this is the case, even on Windows, in CSS you can use the forward-slash as a path separator to reference an image. If you want to use the forward-slash though, you must escape it with another backslash. Here are two examples:

#elem1 {
  background-image: url("relative-path\\to\\file.ext");
}
#elem2 {
  background-image: url("C:\\path\\to\\file.ext");
}
#elem3 {
  background-image: url("relative-path/to/file.ext");
}
#elem4 {
  background-image: url("C:/path/to/file.ext");
}

As you can see above I have three different ways to add a background image:

  1. url("relative-path\\to\\file.ext")
    For the element of ID “elem1” I am specifying that the background image is found at the relative path of “relative-path\to\file.ext”. It is important to note that I am escaping the backslashes (path separators) with an additional backslash.
  2. url("C:\\path\\to\\file.ext")
    Just as in the previous example, if we need to reference something using an absolute path while maintaining backslashes as path separators, we need to escape all backslashes with a preceeding backslash.
  3. url("relative-path/to/file.ext")
    For the element of ID “elem2” I am specifying that the background image is found at the relative path of “relative-path/to/file.ext”. Even though the normal path separator on Windows is a backslash you can use a forward slash.
  4. url("C:/path/to/file.ext")
    Just as in the previous example, if we need to reference something using an absolute path we can use a forward slash as the path separator.

This may seem like a minor issue but when developing Electron apps it may come in handy. Have fun and as always, happy coding! 😎