Applying a background img (using a Mac file path url)

HTML-CSS
#1

Good afternoon everyone. I’m currently trying to apply a background via css using a file path url on my mac but I can’t seem to get it to work for some reason. There are many tutorials on how to do this with windows but none for mac (that I have found to work anyway). I have tried opening the saved image using a browser then copying the new url (that includes the file path information) but to no avail. I’ve also tried right-click/alt ‘copy — as pathname’ but again, no luck. if someone could point me in the right direction I’d be highly appreciative. Code is as below:

Bgfp1
Bgfp1824×1384 80.6 KB

Thanks for the help in advance.

#2

CodePen doesn’t have access to your local filesystem (how would that work? The CodePen application is not on your computer, just the UI that you use to interact with it), so you can’t I’m afraid.

You open the developer tools in your browser as a first step.tk.debugging something: if do so, the console shows an error message explaining that you cannot use file:// URLs, ie it will not let you access the local filesystem on your computer.

#3

Is that code in index.html on your own machine, or only on codepen?

If you try to use that url on codepen, it tries to look on codepen server for it.

Try this:
Create index.html on your machine in some folder, then put your image in the same folder.
THEN use url("./yourImageName.jpg")

It should work, and maybe you will get it why it is not working now.

#5

Ah okay, silly mistake on my behalf. Thanks for clearing that up for me.

1 Like
#6

I’ll keep this in mind for best practise next time. Thank you.