I use Brackets however it isn’t displaying the background image which means I have to check all my changes by uploading the files via Filezilla each time I want to check what I have amended.
If I had to guess I would say your local folders are not set up correctly. Your links in your css are absolute: ‘/bg.jpg’. If you have your root folder on your local machine set up differently to the structure on your remote server then it’s not going to show up.
If you have a webserver running on -
/var/www/html/public_html
Then an absolute link /bg.jpg (with slash) would be equal to:
/var/www/public_html/bg.jpg
Regardsless of where you add that link making it absolute (the backslash revolves back to public_html.
A relative link e.g. : bg.jpg (no slash) or would then change depending on where it was placed. So if I had that link inside the main.css file inside /css the new url for that link is now:
/var/www/public_html/css/bg.jpg
If that file path is relative (meaning that it doesn’t start with http://),
What you gave is still relative. As I said, it’s relative to the root. I can’t take that exact URL and plug it into my page and have it work. No. It’s not absolute. There is no ONE possible URI.
Yeah I’m mixing terminology I applogise. It’s a relative link that resolves back to the root directoy rather than relative to the document. My point being that the relative link on the local server could be resolving back to a different place.
There are TWO TYPES of link PATHs you can use on a website : Relative and Absolute.
RELATIVE paths look like
mypath/
…/childDir/file.png
thisFolder/anothrerFolder/filename.jpg
…/directory/myDoc.html
‘…/’ represents PARENT of the current directory ( essentially the folder that contains the file)
‘/’ means a CHILD of the current directory ( thus you’ll never have: filename.gif/someDir)
lets say you had a folder called ‘halfRoot’, INSIDE it you have two other folder, one called: ‘css’ the other ‘images’ to reach an image in the images folder from a file in the css folder you would have to go UP ONE DIRECTORY
so you would use : …/images/myPNG.png
to reach the same image from a file in the halfRoot folder you would simply do: images/myPNG.png
The cool thing about RELATIVE file paths is, that when migrating, as long as you move the root folder your links won’t be broken. In a sense the site is independent of where it’s stored.
you must write the whole path out the WHOLE path. it’s more verbose but simpler to grasp as where you are calling the link from in the file structure has no baring on how to write the link.
this, however , means when you move the TARGET folder someplace else ( or if your connection to the server is severed) your links are broken.
The best option, imho, is to set up a local server environment that matches your online one. That’s easy to do, using something like MAMP (for Mac) or XAMPP (for PC).