2

I've done my searching and the topics haven't been of help.

I'm trying to have the background image of my header repeat across the X axis of the header div.

When I make CSS with a long URL such as

background-image:url('http://site.com/images/logo.png'); everything works fine

When I try to shorten the CSS to something such as ~/images/ or even having the CSS and site file already in the root folder and using /images/ I get nothing

background-image:url('~/images/logo.png')

background-image:url('/images/logo.png')
CloudyMarble
  • 36,908
  • 70
  • 97
  • 130
  • `/images/` should work. Can you check in Firebug's "Net" tab what the full request ends up looking like, and what response you get back? – Pekka Apr 23 '11 at 21:02
  • Not that it really matters, but single quoting your resource paths inside of `url()` doesn't work in IE5 for Mac. The preferred style is to not quote them at all. – jpsimons Apr 23 '11 at 21:30

2 Answers2

4

This is possibly because you're not shortening your URLs appropriately.

Assuming an absolute path of:

url('www.example.com/images/imageName.png');

A root-relative URL would be:

url('/images/imageName.png');

And a relative path (assuming your CSS file is in www.example.com/css/cssStylesheet.css) would be:

url('../images/imageName.png'); /* parent directory, then the images directory */

The ~ prefixed url format is unknown to me, though I suspect it's an ASP, or .NET, form? Though I'm unable to advise on that.

Questions that might be of use to you:

Community
  • 1
  • 1
David Thomas
  • 249,100
  • 51
  • 377
  • 410
0

A URL containing "~" is something that's specific to ASP.NET, it's processed server-side and transformed into a "proper" URL such as http://mysite/my_virtual_directory/images/logo.png. Web Browsers don't have any way to do this as they don't know to what "~" refers.

You need to ensure that the URLs you use in your CSS file are "understandable" by the browser, so either have them "fully qualified" (http://mysite/my_virtual_directory/images/logo.png) or starting from the "beginning" (/my_virtual_directory/images/logo.png).

Rob
  • 45,296
  • 24
  • 122
  • 150