CSS background images break when I move CSS to subfolder and change url path

1
votes

So what I have is two css's.

  1. style.css
  2. signup.css

I created a folder called css and placed signup.css in the css folder.

signup.css is a copy of style.css just placed in the CSS folder.

Here is the css code that contains the images:

#body{
width:683px; margin:0 auto; padding:0 0 60px 0;
background:url(images/header_bg.gif) no-repeat right top #F7F7F7; color:#171717;}

When I reloaded the webpage the images broke, so I changed the code to be:

#body{
width:683px; margin:0 auto; padding:0 0 60px 0;
background:url(../images/header_bg.gif) no-repeat right top #F7F7F7; color:#171717;}

However the images still won't load. How do I adjust the css so the images load with the style.css placed under the css folder?

In response to a question: 

head
    meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    title>
    link href="css/signup.css" rel="stylesheet" type="text/css" />
    /head>
3
css
How are you linking to the css file in your HTML and where is the images folder located? – JJ.
Have you tried clearing the cache? – Jezen Thomas
you said you moved signup.css into the css folder but in your code there is style.css - are you editing the wrong file? – Zoltan Toth
@ZoltanToth good catch, however this was just a bad copy and paste from the wrong html please see edit – user222427
css urls are relative to the stylesheet file, not the document – starbeamrainbowlabs

3 Answers

5
votes

Set a basehref tag in your HTML head:

<base href="http://example.org/image_base_path/" />

All requests without a protocol will get this URL prepended.

background:url(images/header_bg.gif) will get loaded as http://example.org/image_base_path/images/header_bg.gif

0
votes

Try using 

background:url(/images/header_bg.gif)

Assuming the path to your images folder relative to your domain is /images

0
votes

I'm not sure I follow your changes exactly, however I'm assuming you started with something like this:

(HTML):

<head>
...
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
...
</head>

with files and directories:

index.html
style.css
images/
images/header_bg.gif

and it was working properly. Then if you added the following directory and file:

css/
css/signup.css

and changed the HTML head to read:

<link rel="stylesheet" type="text/css" href="css/signup.css" media="screen" />

and in css/signup.css you changed

background: url(images/header_bg.gif) no-repeat right top #F7F7F7; color:#171717;}

to:

background: url(../images/header_bg.gif) no-repeat right top #F7F7F7; color:#171717;}

and all the files are world-readable (or readable by the web server user) then you things should work properly. Make sure that your css directory is world-executable and the css file is world-readable. You can verify whether your css file is readable by opening it directly in your browser, ie:

http://www.mysite.com/css/signup.css

If you get a 404 error, then the css file can't be read by the web server.

If you prefer you can also use an absolute path in your css file to point to the image, for example:

background: url(/images/header_bg.gif) no-repeat right top #F7F7F7; color:#171717;}

(assuming the images folder is located at the root folder on your website).