Just cant get background image to appear :-(

[Nightwing]

Good evening from cold wet 9 Degrees locked down York UK

On this website:
http://cluster7.website-staging.uk/english-teacher-david.co.uk/

I cant get background images to appear from a css file Here you can see the different …/ combinations Ive used:
background-image: url(“…/images/home-02.jpg”);
background-image: url(“/images/home-02.jpg”);

Here is a screen shot of my file structure:
Screenshot 2020-04-29 at 7.31.37 PM.png.pdf (15.8 KB)

Any insights welcome

[Erik_J]

@Nightwing

I cant get background images to appear from a css file

Hi Nightwing, nice to see you again!

If I use Inspector and change the header background to url("images/home-02.jpg") or url("./images/home-02.jpg") it shows that image.

Its original background image seems to be missing: url("images/home-01.jpg")

[Erik_J]

@Nightwing

Here is a screen shot of my file structure:

Just want to remind of the path syntax.

When the target directoy or file is in the same directory as the CSS the syntax is dot-slash images or just images.

And dot-dot-slash takes you to the parent directory. (The use of just a slash might differ in different OSs)

Edit)
On a web server the use of just a slash takes you to the web site root directory,.
E.g: To target the root index file with the “Home” button you could use just the slash as url “/”.

[John_Betong]

@Erik_J

Just want to remind of the path syntax.

I find using paths confusing because:

1. all images expect a URL and not a path.

2. If “Https://domain-name.tld/” is missing then the relative path may be appended to the current URL.

3. Using include/require changes the URL and relative paths can create havoc if the file is included/required from different parent pages.

4. because the image is always in a fixed location then far safer to use a URL to the image location.

[Erik_J]

@John_Betong

I find using paths confusing…

That was me trying to simply elaborate. Like when using the cd command in nearly all OSes

Thanks for clarifying thoroughly.

[Gandalf]

@John_Betong

because the image is always in a fixed location then far safer to use a URL to the image location

What if you’re testing on localhost before uploading to a live site? I don’t see that working.

[John_Betong]

@Gandalf

What if you’re testing on localhost before uploading to a live site? I don’t see that working.

Usually with images, and CSS files I have a link to the online files.

Edit:

I also use a defined constant on every site that I have and test if localhost or online:

  defined('LOCALHOST')
      ?: 
  define('LOCALHOST', 'localhost'===$_SERVER['SERVER_NAME']);

$css = require 'online_file.css.'; // DEFAULT
if(LOCALHOST) :
  $css = require 'local_file.css.';
endif;

[Gandalf]

For some reason, I find using relative addresses easier

[Nightwing]

Yes great to see you are all still here Yes your suggestion worked @Erik_J grazie mille Just to add you spotted I added the wrong image, anyways it works n ow

[Erik_J]

@Gandalf

What if you’re testing on localhost before uploading to a live site?

I’ve concluded that a foolproof way is to use the host file to point the client’s domain to local host in my own machine. That way it doesn’t matter if the URLs are relative or not, though I always use relative paths in URLs.

At least when developing a CMS site you don’t have to search and replace the database for hard-coded URLs before uploading to the live server. (In my experience Wordpress and the like might save absolute URLs where you least expect it.)

If the host file option is impracticable I name the local host domain the same as the live but miss-spell the top level, e.g: .com to .cox to make the search and replace in the databases safe.

That’s my two cents in this matter.