Using Images In Css With Movable Type

[kaseytraeger]

OK, I'm having a bit of a problem with getting an image to load into my Movable Type blog using CSS. Here's the CSS code:

 

>#hdr1{
background-image: url('/home/my_cpanel_username/public_html/i/reddog.gif');
background-repeat: no-repeat;
padding-top: 144px;
width: 600px;
}

 

For some reason, the CSS code can't find the image I'm trying to use as a background when I declare the URL in this manner.

 

It works fine when I do this:

>#hdr1{
background-image: url('http://www.pudgypuppy.com/i/reddog.gif');
background-repeat: no-repeat;
padding-top: 144px;
width: 600px;
}

 

The problem is ... I have password protected and hot-link protected the directory used to store my images so that others can't steal them. So when the blog loads, it displays a user authentication box before it will load the picture. Obviously, this is not what I want to have happen. That's why I don't want to use the line

background-image: url('http://www.pudgypuppy.com/i/reddog.gif');[/code]

 

Anyone know the proper way of giving a URL in CSS based on the root directory?

[TCH-Rob]

What about i/reddog.gif?

[LisaJill]

It has to be a url, but absolute or relative will work; but I'm not sure why you'd password protect the directory? Is there a reason for that? Like you mentioned, it can cause some problems.

 

You could just disable hotlinking and disable indexing to avoid image listings on that directory. People that really want the images can get them if they're visible on your site at all, though. =)

[kaseytraeger]

What about i/reddog.gif?

I tried that, but it didn't work, either.

 

Basically, here's how my site is structured. The blog is in a subdomain called "blog.pudgypuppy.com". So my Movable Type index file is located at public_html/blog/index.php while the image is located at public_html/i/reddog.gif.

 

I also tried using the line

background-image: url('../i/reddog.gif')

 

but it didn't work either. Any other suggestions?

[kaseytraeger]

It has to be a url, but absolute or relative will work;

...

People that really want the images can get them if they're visible on your site at all, though. =)

Yes, you're right about that. I had forgotten that they are loaded into cache on the user's computer. Don't ask my why I didn't remember that... it must have been a long day.

 

Anyway, I will remove the password protection from the directory.

 

As a side question (and because I always get them confused) ... can you give me an example of a relative URL versus an absolute URL?

 

I always thought that something like ../i/reddog.gif was a relative URL but that /home/cpane_username/public_html/i/reddog.gif was an absolute URL.

[LisaJill]

You're confusing paths and URL's, not relative and absolute. You can have relative and absolute paths, same as URL's.

 

An absolute URL starts with the full protocal of the url, ie: http://www.me.com/images/wickedwitch.jpg

 

A relative URL would be /images/wickedwitch.jpg (relative to the ROOT) or images/wickwitch.jpg (relative to the current directory.)

 

In the same vein, an absolute path is one that derives from the root, ie: /home/username/public_html/images/wickedwitch.jpg

 

and a relative url derives from the current directory, ie images/wickedwitch.jpg; so it is a little different from the way the relative url's work.

 

Have I confused you? =)

 

(In all of my memory, I can not remember a single post that I did not edit within 20 seconds *sighs*)

Edited April 30, 2004 by TCH-Lisa

[kaseytraeger]

Have I confused you? =)

No, no ... not confusing at all. Thanks for straightening out my thinking. I'm glad to know that I at least had "relative" or "absolute" clear in my head.

 

OK, I'm going to try removing the password protection on my image directory and using the absolute URL in the CSS file.

[kaseytraeger]

OK. So it worked when I used

>background-image: url('http://www.pudgypuppy.com/i/reddog.gif');

which is the absolute URL.

 

But I also tried using the relative URL of

>background-image: url('/i/reddog.gif');

and it didn't work. I thought that putting the / in front of the i directory (i stands for 'images') would make it relative to the root URL. But the CSS didn't understand it, so the picture didn't display. Any idea why?

[LisaJill]

Mm, I'm not sure.

 

I use absolute to the root url's in my css all the time, you can view it here:

 

http://www.lisa-jill.com/textpattern/css.php?s=default

 

You might try copying and pasting one of the image lines from that and see if it helps? Obviously replace the important bits.

 

If you want to make the change to your css and push it live (broken temporarily) for a few minutes, let me know when you have and I'll have a look real fast. I have yahoo open at the moment if you want to use that, or I'll keep refreshing here. =)