I'm having an issue with my css. All my css works across all browsers except all images for the backgrounds aren't loading. As well as my icon file which is actually linked in the HTML header.
On brackets text editor in Live view mode (live view opens in chrome only) I see the icon and images but in other scenarios like just opening the html file to what ever browser including Chrome, none of the images work.
I dont really understand what the deal is but first guess would be pathing but I dont think its that. Example:
.container{
background-image: url("lib/css/img/cityscape.jpg");
}
Ive tried single quotes and double as well as no quotes. I tried shortening the relative path and that didnt work either. Any suggestions to why my images only work in Live preview on the Brackets text editor?
Thanks.
Just got back to working on this but it seems the issue was the path location in the css file. It wasn't relative enough and maybe someone could explain why its like this is better than I can.
/*This works by putting the period in front of the path*/
background-image: url('./img/banner.jpg');
/*What didn't work*/
background-image: url('lib/css/img/banner.jpg')
The period is referred as a dot-segment
I found some info here: What does a dot mean in a URL path?
However I'm still unclear as to why Live View in the Brackets editor allows me to see the images. I'm thinking it has to do with how live view works which is hosting the site locally on some random port rather than just opening the file from the folder directly.
I'm hoping this isn't an issue when its pushed to a remote server.