asked on

ASP.NET MVC Image path in CSS

Hello Experts.
I have a simple issue, where the image which works locally but when I deployed onto the server the image doesn't show.
Local Path:
AppName\All\Images\details_open.png

td.details-control {
    background: url(/All/Images/details_open.png) no-repeat center center;
    cursor: pointer;
}

Open in new window

Once deployed on server, it doesn't work. So for test purpose I added web url of the image and it works.

td.details-control {
    background: url('https://datatables.net/examples/resources/details_open.png') no-repeat center center;
    cursor: pointer;
}

Open in new window

What could be the issue, I have the image in the folder.

Ryan Chong

must likely it's the mapping of path issue. try see what's the path generated in HTML for debugging.

for a quick fix, try:

td.details-control {
    background: url(All/Images/details_open.png) no-repeat center center;
    cursor: pointer;
}

Open in new window

HainKurt

it depends on where the css is
path is relative to css

try one of the following, until it works

background: url(All/Images/details_open.png) no-repeat center center;
background: url(../All/Images/details_open.png) no-repeat center center;
background: url(../../All/Images/details_open.png) no-repeat center center;
background: url(../../../All/Images/details_open.png) no-repeat center center;
background: url(../../../../All/Images/details_open.png) no-repeat center center;

Open in new window

...
and so on...

HainKurt

if it is not a css, but a .net page, then you can try

background: url(<%=Page.ResolveUrl("~")%>/All/Images/details_open.png) no-repeat center center;

Open in new window

ASPDEV

ASKER

I found the issue when I inspect the code via developer tools. It's checking the path under CSS folder, but the images is in different path(under Images folder). How can I change the path
CSS Path:
All/CSS/

When I tried below it's still appending CSS path to the below like this All/CSS/All/images/details_open.png

background: url(../All/Images/details_open.png) no-repeat center center;

Open in new window

If I tried like this, I won't get the AppName. On Server actual path is MyApp\All\images\details_close.png

background: url(/All/images/details_close.png) no-repeat center center;
    cursor: pointer;

Open in new window

HainKurt

is this a css file? if yes whats the path?
and whats the path for image?

ASPDEV

ASKER

CSS Path:
MyApp/All/CSS/Test.CSS

Image Path
Myapp/All/Images/details_open.png

ASKER CERTIFIED SOLUTION

HainKurt

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

HainKurt

look at here

td.details-control {
    background: url(../Images/details_open.png) no-repeat center center;
    cursor: pointer;
}

Open in new window

<table>
  <tr><td>UserID</td><td>User Name</td></tr>
  <tr><td>1</td><td>Hain</td></tr>
  <tr><td>2</td><td class="details-control">Kurt</td></tr>
  <tr><td>3</td><td>HainKurt</td></tr>
</table>

Open in new window

ASPDEV

ASKER

Thanks HainKurth.. It worked now.