CSS Background Images in Mvc3

CSS background images in MVC3

If you're following the "norm" your main page layout will have something like:

<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />

and your other assets (images for example) will either reside directly in the content folder or in an "images" folder under content.

Therefore, in your example:

background-image:url('../../Content/images/gradient_tile_page_top.png');

becomes

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

CSS Background Images in MVC3 - Continuation

You have the image location wrong.

Here's what you have:

background-image: url("img/icons/social-icon-set.png");

And as we can see be your screenshot, it's social-icons-set (note the extra "s"):

Reference background-image in CSS - application MVC 3 ASP.NET in IIS

Use a relative path. Partial urls are resolved relative to the style sheet:

background-image: url(images/Bottom_texture.jpg);

Images defined in CSS are not displayed in a deployed MVC3 site

Besides ensuring that the images are actually loaded on the server, you may want to check whether the application on the server is actually running at the root directory /. For example, if your site is located at facebook.com/myGreatApp by prefixing your url with / you are telling the browser to look for images at facebook.com/Content/... which is the root rather than at facebook.com/myGreatApp/Content/...

As some other posters have mentioned, the fix for this would be to determine what the actual path from your css to those images is and to use that. A relative path would serve this perfectly and which relative option to use depends on where the css is located in relationship to the images.

CSS url path incorrect with MVC 3

If you give url of image in css it path start right from the folder where your css is so if your css file is inside Styles folder and you give background-image url as

url("/Images/Background.jpg");

localhost/MYSITE/Styles/Images/Background.jpg

because your folder structure is like this

Root
  Styles
  Images

so if you want to point some image in the Images folder from your css file in Styles folder you should write like this

url("../Images/Background.jpg");

It means go to the parent folder that is Root and then Images and then Background.jpg

.Net MVC3 app_offline.htm issues with css/images

I didn't even know app_offline.htm worked for MVC :-)

As an alternative, you could create a global filter or if you have a common controller base class that when the maintenance flag is turned on, redirect all traffic to the maintenance view (flag can be in DB or app config).

---

Related Topics