CODEWITHSUNDEEP
css
user222427
user222427

Reputation:

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

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>

Upvotes: 1

Views: 2465

Answers (3)

feeela
feeela

Reputation: 29932

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

Upvotes: 4

JJ.
JJ.

Reputation: 5475

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).

Upvotes: 0

Andy
Andy

Reputation: 131

Try using 

background:url(/images/header_bg.gif)

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

Upvotes: 0

Related Questions