How to get url of the image in CSS

Question

I have a css class which applies an image to the div tags throughout the application. The css class is defined in a separate css file located in SharePoint styles folder in the 14 hive.

.logo {
    background: url("/_layouts/images/logo.png") no-repeat; 
    width: 172px; 
    height: 36px; 
    margin-top: 23px; 
    }

But now we have decided to put the image in the images library named PublishingImages. Following is the url of the image in the library. htt://server/PublishingImages/logo.png I tried to change the background property to url("~/PublishingImages/logo.png") no-repeat; But that doesn't work. Note: The css file still exists in 14 hive.

Answer 1

The tilde only works for controls that can run at the server. For example, if you have an image control, you can set the source to "~/folder/file" in addition to having runat="server" in the tag. Therefore, you cannot use the tilde in stylesheets - CSS is something that the client's browser handles. The best thing to do is use the full path for the image.

Answer 2

Try using:

background: url("/PublishingImages/logo.png") no-repeat;

worked for me.

Answer 3

In CSS, the background URL is either absolute or relative to the stylesheet location - in your case it means the folder in the 14 hive.

You might need to reconsider moving the image away from the stylesheet - maybe you'll also need to put the stylesheet in a library?

Answer 4

I dont know if this will work for you but worth a try! if the folder is new then have you made sure on your hive folder goto the folder PublishingImages, right click and check your security settings are all correct, Also if you can see two checkboxes at the bottom... the first should be checked and the second not checked. Click on the second checkbox to reset the inheritance. Performe this for the image aswell.

Hope it helps :)