Question

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>

Answer 1

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