CODEWITHSUNDEEP
cssasp.net-mvcimage
Ross
Ross

Reputation: 131

CSS images not showing in ASP.NET MVC

In my ASP.NET MVC application, I am referencing background images via CSS. When I run it in the dev environment, they show up fine. But when I deploy it (using IIS 7.5) the images do not load at all. I have tried every combination of relative paths and background/background-image CSS tags, but nothing works. Here is my file structure and CSS:

File structrue:

Content  
    CSS file  
images  
    image.png

CSS:

background-image: url(/images/bsb_header2.png);

I have also tried ../images/bsb_header2.png and ../../images/bsb_header2.png to no avail.

What is really strange is when I try to go to the image directly (i.e. www.website.com/images/image.png), I am redirected to a login page. Perhaps there is some access or security setting I'm missing? I haven't done anything with login controls yet (the default account view and controller are in my project but I haven't done anything with them yet) and I can view all my other pages just fine.

Update: I FINALLY figured it out. The image file in question was encrypted. Right click the image file and navigate to properties, click the advanced button on the general tab, uncheck "Encrypt contents to secure data", click OK, OK.

The tip off finally came when I noticed the file name was green in Windows Explorer. I see green file names all the time with no problems so I didn't think anything of it. Then I noticed it was the only green file in the entire web app folder. Put two and two together and it worked instantly. Thanks everyone for your help.

Upvotes: 3

Views: 14309

Answers (7)

Balachandar P
Balachandar P

Reputation: 391

in css set "display: block"

.searchbtn
{
    margin-top:-15px;
    background-image:url(../images/icons/search.png);
    background-repeat:no-repeat;
    width:18px;
    height:18px;
    display: block;
}

Upvotes: 1

RAY
RAY

Reputation: 2289

Please Add two users IUSR, IIS_IUSRS to the publish folder and assign permission for them to read & execute

Upvotes: 4

Ross
Ross

Reputation: 131

I FINALLY figured it out. The image file in question was encrypted. Right click the image file -> properties -> advanced button on general tab -> uncheck "Encrypt contents to secure data" -> OK -> OK.

The tip off finally came when I noticed the file name was green in windows explorer. I see green file names all the time with no problems so I didn't think anything of it. Then I noticed it was the only green file in the entire web app folder. Put 2 and 2 together and it worked instantly. Thanks everyone for your help.

Upvotes: 2

BrianM
BrianM

Reputation: 538

Had the same issue and finally found a solution.

  • In IIS open "Authorization Rules".
  • If there is nothing there, click "Add Allow Rule"
  • Choose "All Users" and hit OK

Upvotes: 0

Nicholas Murray
Nicholas Murray

Reputation: 13533

Is it possible that IIS 7.5 was not installed correctly?

If you go to Turn Windows Features on or off - under:

Internet Information Services / World Wide Web Services / Common Http Features

there is a Static Content checkbox

is it checked?

see this link for screen-shot.

Upvotes: 1

Naraen
Naraen

Reputation: 3250

From your description, it appears as if the Request for the .png is getting routed to the ASP.NET/MVC engine instead of being served up by IIS.

Is it possible that the routing rules in the Global.asax are picking .png files? (I know this doesn't explain why it works in your dev environment).

Does it work if you add a ignoreRoute for .png files at the beginning of your route list in Global.asax? Something like below...

 routes.IgnoreRoute("{resource}.png");

Upvotes: 0

Richard Schneider
Richard Schneider

Reputation: 35477

The URL should be relative!

background-image: url(images/bsb_header2.png)

Upvotes: 0

Related Questions