CSS background-image won't show with short URL

Question

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

Answer 1

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

Answer 2

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