CSS background-image won't show with short URL

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 g开发者_如何转开发et nothing

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

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

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:

• How do I turn a relative URL into a full URL?
• Using relative URL in CSS file, what location is it relative to?
• Absolute urls, relative urls, and...?

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