[html] css background image in a different folder from css

my css is in assets/css/style.css and my image is in assets/img/bg.png But when i try to link the background image:

background: url(../img/bg.png);

it instead uses assets/css/../img/bg.png as the url. Why is it?

This question is related to html css

The answer is


Since you are providing a relative pathway to the image, the image location is looked for from the location in which you have the css file. So if you have the image in a different location to the css file you could either try giving the absolute URL(pathway starting from the root folder) or give the relative file location path. In your case since img and css are in the folder assets to move from location of css file to the img file, you can use '..' operator to refer that the browser has to move 1 folder back and then follow the pathway you have after the '..' operator. This is basically how relative pathway works and you can use it to access resoures in different folders. Hope it helps.


For mac OS you should use this :

body {
 background: url(../../img/bg.png);
}

You are using a relative path. You should use the absolute path, url(/assets/css/style.css).


I had a similar problem but solved changing the direction of the slash sign: For some reason when Atom copies Paths from the project folder it does so like background-image: url(img\image.jpg\)instead of (img/image.jpeg)

While i can see it's not the case for OP may be useful for other people (I just wasted half the morning wondering why my stylesheet wasn´t loading)


body

{

background-image: url('../images/bg.jpeg');

}


you can use this

body{ background-image: url('../img/bg.png'); }


I tried this on my project where I need to set the background image of a div so I used this and it worked!


You are using cache system.. you can modify the original file and clear cache to show updates