CSS Images Not Showing in ASP.NET MVC

CSS images not showing in ASP.NET MVC

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.

CSS Background-Image refuses to display in ASP.Net MVC

The url inside a CSS file is relative to the location of the CSS file.

So if we suppose that you have ~/content/foo.css and you want to include ~/images/foo.png here's how to reference it inside foo.css:

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

Don't use any ~ inside a CSS file. It has no meaning.

So in your case if the CSS file is ~/Content/Site.css and you want to reference ~/Content/Images/Designs.png the correct syntax is:

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

If this doesn't work for you there might be different causes:

• The image doesn't exist at that location
• You didn't specify width and height to the containing element so you don't see the image

What I would recommend you is to use FireBug and inspect the corresopnding DOM element to see exactly what styles and images are applied to it.

Images not showing on published ASP.NET MVC Website

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.

How do I fix my MVC project so that the images display on the website?

As explained in this answer the App_Data folder is special and images etc.. in this folder will not be rendered.

Add a separate folder like /Content/Images/ or just /Images to your project and serve your images from there.

ASP .Net MVC - Images not being shown in published build

The URLs are not correct, likely due to the fact that you are publishing in a subfolder and so they are no longer at the root of the server. I usually use Url.Content( "~/Content/Images/..." ) to build the url instead of hard-coding it. That way it will take into account the routes when building the path.

Example:

 <img src='<%= Url.Content( "~/Content/Images/banner.jpg" ) %>' alt="Banner" />

Background image not showing in asp.net project

Try by giving the full path for the image

eg:

body { 
background: url('http://www.australia.com/contentimages/about-landscapes-nature.jpg');
}

If it is working, then the problem is with your path, so you have to correct it.

To correct the path:

1) Take the image out of the folder put it in the folder in which stylesheet lies

2) Give style as background-image: url('blue.jpg');

---

Related Topics