CSS background-image won't show with short URL

user722118 picture user722118 · Apr 23, 2011 · Viewed 13.4k times · Source

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

David says reinstate Monica picture David says reinstate Monica · Apr 23, 2011

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: