how to set background-image

Question

I am using asp.net MVC. In my application,To set the background image,I have implemented like,

 background-image:url("../../Images/Home/Logo.png");

When I debug this,background image is displaying ,when I deploy it to the server,It is not displaying . If I implement like

background-image:url("Images/Home/Logo.png");

background-image is displaying after deploying in the server but in my local it is not displaying,what is the solution for this?

@SudipPal Do you means change everytime when do something in dev or production environment or make a configuration variable to handle this issue. — Anirudha Gupta, May 27 '13 at 07:34
@charan You can put the url relative to imageurl and your current file (which you are edit). This trick will work on both server and production. — Anirudha Gupta, May 27 '13 at 07:35
@F1beta Yes, here absolute path means, domain name should come from variable and as per my knowledge, I think everyone should use different configuration file for different application environment. — Sudip Pal, May 27 '13 at 07:45
@SudipPal as Aliriza's answer their is no way to do dynamic thing in css file. You need to find/Replace everytime when you upload the css file on server. Yes, If you write css inside masterpage or cshtml aspx kind render-engine then you can do it :) — Anirudha Gupta, May 27 '13 at 07:49

score 3 · Answer 1 · answered May 27 '13 at 06:54

You should use correct client relative path

aspxImgCtrl.ImageUrl = "~/Images/GIF/arrow.png";

The ~ operator is recognized by asp.net only for server controls and in server code. You cannot use the ~ operator for client elements.

Try

background:url('<%= ResolveClientUrl("~/path/to/img") %>');

score 0 · Answer 2 · answered May 27 '13 at 06:40

0

Place cssImages in same place with css file. I mean

Root
    Content
        Site.css
        Images
            Logo.png

And use absolute path like this: background-image:url("Images/Logo.png"); in Site.css

answered May 27 '13 at 06:40

score 0 · Answer 3 · edited May 23 '17 at 10:25

0

I have encountered the same problem. This can be fixed by placing the image folder inside the same folder where your css files are

I hope you know the meaning of "../" Refer Here. If you know this you can fix the thing easily.

edited May 23 '17 at 10:25

Community

answered May 27 '13 at 07:49

Rohith

In the server it is displaying,but in the local it is not displaying if I implement like "././Images/Home/Logo.png" – charan May 28 '13 at 04:22
Charan, As I have mentioned place your Image folder inside the css folder and try with out "../" donot use ././ – Rohith May 28 '13 at 09:10

3 Answers3