17

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?

Jürgen Paul
  • 14,299
  • 26
  • 93
  • 133

8 Answers8

22

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);  
}
Adriano Silva
  • 2,518
  • 1
  • 17
  • 29
  • 6
    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. – Cayce K Jan 28 '15 at 13:10
3

For mac OS you should use this :

body {
 background: url(../../img/bg.png);
}
Wariored
  • 1,303
  • 14
  • 25
0

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!

Tanay Toshniwal
  • 142
  • 1
  • 11
  • Why to use quotes in URL is answered here - https://stackoverflow.com/questions/2168855/is-quoting-the-value-of-url-really-necessary – Tanay Toshniwal Nov 28 '17 at 17:58
0

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)

Diseño Franco
  • 1
-1

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.

bhanushrestha
  • 101
  • 1
  • 4
-1

body

{

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

}

Hari Swapna Puli
  • 17
  • 3
-4

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

Abudayah
  • 3,816
  • 7
  • 40
  • 60
-5

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

Brownman98
  • 1,053
  • 1
  • 7
  • 17
  • 3
    Relative paths work, and absolute paths aren't always the best. Maybe we could focus on the problem? – Ry- Jan 09 '12 at 01:35