I'm working on my site using MAMP. It seems like I need to use an absolute URL path to call in a background image.

Here's the absolute URL that's working:

.header-top-inner {
	background-image: url("http://localhost/layouttests/sites/all/themes/fusion/starter_layouttest/images/button_sprite.png");
	background-repeat: no-repeat;	
}

When I try to make the URL as root relative it doesn't work:

.header-top-inner {
	background-image: url("/sites/all/themes/fusion/starter_layouttest/images/button_sprite.png");
	background-repeat: no-repeat;	
}

Can anyone tell me what I'm doing wrong?

Comments

nevets’s picture

Have you tried just 'images/button_sprite.png'?

Also, if you use Firefox you can use firebug and under the 'net' tab see what the browser is resolving the url to.

arnemaine’s picture

Had some great advice, and found out I needed to use a path relative to the CSS file in my directory.

So needed to be background-image: url("../images/imagename.png")

So all set!

paultrotter50’s picture

This worked for me too. Note that changing the url as suggested in firebug won't show the correct file. You need try it in the css itself.