1

I may be making this harder than it needs to be but I can't get it to work. My project folder structure is: -config

-css

  • styles.css

-images

  • background.png

-nbproject

-public_html

  • index.html

-test

In my CSS, I am trying to reference the background.png file. I thought that going up one level was denoted by ../ so I have:

 background-image:url(../images/background.png);

Then, in the index.html file, I am trying to import the CSS file using:

<link rel="stylesheet" type="text/css" href="../css/styles.css">

The background is not showing up, so I'm guessing I am specifying the paths incorrectly. Is ../ not the way to say 'go up one level'?

I am trying to apply a background image using this class:

.body {
 background-image:url(./images/background.png);
}

Then, apply the CSS as follows:

<body class="body">
user1154644
  • 4,491
  • 16
  • 59
  • 102
  • `..` should work as normal in URLs. URLs in CSS are resolved relative to the CSS stylesheet, not the HTML page's base URL, though that shouldn't matter in this instance. Can you post the whole CSS rule? – Mike Samuel Aug 28 '13 at 00:04
  • all files are suppose to be inside one folder to differentiate you could make images folder and place your image in there. Ideally writing just images/background.png picks the image if the index.html file or other files are in same folder. Could you post your code here? – AKIWEB Aug 28 '13 at 00:43

3 Answers3

2
background-image:url(../images/background.png); <-- this is relative to styles.css

<link rel="stylesheet" type="text/css" href="../css/styles.css"> <-- this is relative to your HTML file

The CSS and images need to be inside the web root, underneath public_html

-nbproject

-public_html/

  • index.html

  • css/

    • styles.css

  • images/

    • background.png

-test

Then you would use: 

background-image:url(../images/background.png);

and 

<link rel="stylesheet" type="text/css" href="css/styles.css">
AlienWebguy
  • 76,997
  • 17
  • 122
  • 145
1

The ../ notation does represent going up one level. But this is for URLs and the web server is preventing the outside audience from accessing parts of the file system that should not be visible to the outside world.

You need to adopt

  • index.html
  • css/
    • styles.css
  • images
    • background.png

And place this file structure under public_html

SECURITY

This mechanism stops people doing horrors like

 http://<your machine name>/../../../etc/passed etc
Ed Heal
  • 59,252
  • 17
  • 87
  • 127
  • So if I use this file structure, do I get rid of the ../ – user1154644 Aug 28 '13 at 00:09
  • You do not need to do anything but put all your files as they currently exist under public_html. The server only serves files under this directory or sub-directories. The only thing you need to changes is in the index.html file. i.e `css/styles.css` as the link – Ed Heal Aug 28 '13 at 00:16
0

Your problem is that all files should be in public_html folder ,all other folders in the same level of public html aren't accessible by public.

Move all your folders to public_html and change path of your css file in index.html :

 <link rel="stylesheet" type="text/css" href="css/styles.css">
Charaf JRA
  • 8,249
  • 1
  • 34
  • 44