CSS Background-image question.?

Question

Ok, to link a background image you have to type:

background-image: url(link);

But for that background image link, can it be (assuming this is the correct directory):

images/background.jpg

INSTEAD OF

www.yourdomain.com/images/background.jpg ?

I tried shortening it to the first one, but it didn't work. (confused)

Thanks!

Answer 1

yes you can and its called a relative link, rather than a specific link. In your CSS rule definition you would need to have it written like this
background-image: url('/images/background.jpg');
you need the quotes around and the slash in front of the relative link. Other than that I see not problems with your syntax.

If you need to know the specifics of any CSS element here is a good resource.

http://xhtml.com/en/css/reference/

Answer 2

In order for the shortening (hehe) to work, the stylesheet needs to be in the same directory as the one WITH the folder images/. For example, if your path is:

www.site.com/style.css

Then the stylesheet sees your URL as

www.site.com/images/background.jpg

BUT, if you have your stylesheet elsewhere, it doesn't work as well. For example:

www.site.com/css/style.css
and
www.site.com/images/background.jpg

are in separate directories, and the stylesheet will be looking for:

www.site.com/css/images/background.jpg.

Try the following:

background-image: url(../images/style.css);

The dots tell the stylesheet to go back to the root directory of your site, where /images is housed. Hope this helps :)

Answer 3

that's true, it should work, I can't understand why it didn't. You could try putting a backslash before the "images" but I can't imagine why that would make a difference.

I might be able to help more if you provided more details about what you are trying to do (where youre hosting it, etc.)

Answer 4

This will work, in fact here is one from one of my sites
background-image: url(xbkgsq.gif)

I just put the image in the root in this case but
/images/xbkgsq.gif would work if it were in images.

Answer 5

no, you need a direct link from the web. if you want to shorten it, try uploading your image to another site. like photobucket, perhaps? that may shorten it.