[Solved] background image will not load

[kevmacs]

Sat March 14 2015

Please help:

My CSS background image shows up when I view it internally, but it does NOT load “live” on the web.

This is a link to the site

http://www.westcoastcolour.ca/index.html

The home screen should not be white it should display the background image. (it’s a picture of the top of a house)

I don’t see it being an issue with it not pointing to the image, as it’s an HTTP image not an image inside a folder.

I am lost
Please help. :|

Thanks..

note: the image loads fine in codepen also, so I really don’t get why it won’t on my actual site?

Here is my CSS code: https://codepen.io/anon/pen/gbQpeQ

.intro {
width:100%;
position:relative;

background: url(http://westcoastcolour.ca/img/bg1.jpg) no-repeat top center;

}

[Shikkediel]

The image path is capital sensitive – the file has the extension .JPG while in the CSS on the site it’s referenced as .jpg.

[kevmacs]

Thanks “Shikkediel”

I changed the file name and the CSS to small case .jpg but it still does not show up on live site? Did I miss something from your suggestion?
https://codepen.io/anon/pen/gbQpeQ

[Shikkediel]

I can still only find the file with capitals (other one’s a 404) :

http://www.westcoastcolour.ca/img/bg1.JPG

If the CSS is small case and this file name too, it should work.

Edit – looks like the file linked to on Codepen is in a higher directory :

http://westcoastcolour.ca/bg1.jpg

[kevmacs]

YES!! “Shikkediel”

You are correct, classic tunnel syndrome. I thought I fixed it but was changing the wrong image’s name.

http://www.westcoastcolour.ca/

IT WORKS!

Thank you so much

[Author]

Posts