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?
9 Answers
Html file (/index.html)
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" media="screen" href="assets/css/style.css" />
</head>
<body>
<h1>Background Image</h1>
</body>
</html>
Css file (/assets/css/style.css)
body{
background:url(../img/bg.jpg);
}
1 Comment
Cayce K
Can you add some explanation to what you did for this. This is a basic HTML/CSS layout. Why would this make the answer as you haven't officially shown any different code than what is really provided.
For mac OS you should use this :
body {
background: url(../../img/bg.png);
}
1 Comment
Fefe
Thanks ! This works for me on windows too, i don't know why the other answer has been chosen as official they didn't understand the fact that we search resources in a different folder from the css file ... Helped me a lot for dynamic routes !
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!
1 Comment
Tanay Toshniwal
Why to use quotes in URL is answered here - stackoverflow.com/questions/2168855/…
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)
Comments
I had a similar situation, but only when launching the site on hosting. In my case, the correct path to the map was the entry of the path in this form:
background: rgba(51, 51, 51, 0.418) url("/portfolio/css/../images/load.gif") center / 50px no-repeat;
Comments
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.
Comments
body
{
background-image: url('../images/bg.jpeg');
}
Comments
You are using cache system.. you can modify the original file and clear cache to show updates
Comments
You are using a relative path. You should use the absolute path, url(/assets/css/style.css).
1 Comment
Ry-
Relative paths work, and absolute paths aren't always the best. Maybe we could focus on the problem?
background: url('../img/bg.png');) solve the problem?