Image path CSS

[HazJ]

background: url(/assets/images/header-bottom.png) bottom center no-repeat, #0d42b2; background-size: 100%;

It shows in local test environment but not on live website. I can access the image if I add /assets/images/header-bottom.png after URL, it shows fine. Even if I try:

background: url(assets/images/header-bottom.png) bottom center no-repeat, #0d42b2; background-size: 100%;

Nothing. I have tried a few others as well. With and without quotes. Cleared cache. File name and extension, etc are correct. Any ideas?

[Beverleyh]

Looks like a syntax error. Try;

background:#0d42b2 url(/assets/images/header-bottom.png) bottom center no-repeat; background-size: 100%;

[HazJ]

No joy. Hmm. Any other ideas?

[Beverleyh]

Is there any other CSS that could possibly be overriding it? Either something in an earlier stylesheet with greater specificity, or something later down the cascade?

Over and above this, you’ll probably need to provide a simple test page hosted on your own domain for us to see firsthand.

[HazJ]

No, no override. Hmm. I don’t understand why it works locally. Wouldn’t that mean it is the path? Structure:
Root:
index file
assets (folder)
– css
– fonts
– images
– js

[Beverleyh]

And you’re doubly sure that lettercase matches and is correct in all your code; filename, file extension, and all preceding folders?

Windows environments are not case-sensitive whereas Unix is, and it’s a common hurdle for folks developing on a local machine, usually running Windows 10 or whatever, to upload to a web host and have their asset paths suddenly break there. image.jpg is not the same as Image.JPG

But like I said before, you’ll probably need to provide a simple test page hosted on your own domain for us to see firsthand.

[Author]

Posts