In ASP.NET.Mvc, What Is the Correct Way to Reference Images Inside of CSS

in asp.net.mvc, what is the correct way to reference images inside of css

Your first option is perfectly fine if your application is always going to be in the root folder for the website (or at least your images are all going to be in the root folder). If you might have a different path in different situations (like having a shared site on development or testing), then this doesn't work.

The second and third options are basically the same thing. Which one is used is completely dependent upon where the images are located in relation to the CSS file. I personally believe that the second looks cleaner, so I try to put any images referenced by my CSS files in a folder structure relative to where the CSS is located. However, some people prefer to keep all images in one place (even mixing content images with site "chrome" images) and as such may need to use relative pathing with ../ in order to accomplish this.

What is the correct way to reference an image in an asp.net mvc 4 project?

You should be using the Url.Content helper with the tilda ~ marker (which resolves to the root of the application):

src="@Url.Content("~/Images/backup5.jpg")"

how do i reference an image from my css in asp.net-mvc on a hosting provider

You need to make the URL relative to the css file.

If your css file is located under content/style

Then your url should be ../image/back-page1.png

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.

ASP.NET MVC background image

Don't use an absolute path. Use a relative path.

if your css file is located here for instance (from the root of your site):
/Styles/Site.css

then your CSS should be:

body {
  padding-top: 50px;
  padding-bottom: 20px;
  background-image:url(Images/background.jpg)
}

so, you're saying from where your css file is (/Styles) your image file is a sub-directory of this (/Styles/Images/[the-filename-for-your-image]).

Also, not the use of / rather than \ in your image path

How define the img src path in MVC

You can reference images in the top level of the project with the ~.

<img src="~/Images/send.png">

Older versions of ASP.NET MVC needed a @Url.Content() around the path, as described here

Edit: If you want to update the path from Javascript, you can either specify an absolute path, or wrap it in @Url.Content().

$('#image').attr('src', '/Images/send.jpg');

$('#image').attr('src', '@Url.Content("~/Images/send.png")');

Where do you store images for asp.net mvc projects and how do you reference them from site.master

What I generally do is create an "Images" folder inside my Content folder. Where you place your images is really up to you, as long as you are consistent.

Referencing these images from your Site.Master is the same as if you referenced it from any view:

<img src="/Content/Images/mylogo.png" />

---

Related Topics