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

问题

I am having trouble displaying an background image in my ASP.NET MVC 2 application. Currently, In ~/Views/Shared/Site.master, I set my link to the style sheet to:

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

The image I plan to display is in my ~/Content/Images/Designs.png

Here is what I have tried

body
{
    background-image: url(~/Content/Images/designs.png); 
    background-repeat: repeat;  
    font-size: .75em;
    font-family: Verdana, Helvetica, Sans-Serif;
    margin: 0;
    padding: 0;
    color: #696969;
}

Other Tries Included:

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

none of the above tries worked. What can I do?

回答1:

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.

回答2:

This is what I had to do:

background-image: url('@Url.Content("~/images/foo.png")')

回答3:

If you use bundles and have the directory structure like :

-Content
--lightbox
---css
----lightbox.css
---imgages
----close.png

then you can make a separate bundle for content in subdirectories by defining the bundle in that subdirectory:

bundles.Add(new StyleBundle("~/Content/lightbox/css/bundle")
                .Include("~/Content/lightbox/css/lightbox.css"));


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

回答4:

In my case I had to back out to the root and include a path to the Content directory.

So even if my directory structure looked like:

-Content
--css
---site.css
--img
---someImg.png

I couldn't do

background-image: url(../img/someImg.png)

I had to do:

background-image: url(../../Content/img/someImg.png)

This worked locally in debug mode (no minification) and deployed to AWS (with minification) correctly.

Also, don't forget if you're using Bundle minification and you use @import in your CSS to still include the asset in the bundle. For example:

main.css
@import url(../../Content/css/some.css)

Be sure to include some.css in your bundle:

 bundles.Add(new StyleBundle("~/Content/global").Include(
                 "~/Content/css/some.css",
                 "~/Content/css/main.css"));

No need to do this if you're using LESS or SASS bundlers as the handler knows how to find the files and include them (that's the point!); however, if you're doing it as a straight CSS import, the bundler won't know to include it when it minifies.

Hope this helps someone!

回答5:

It could be a caching issue in the browser; that is, the browser may cache an older version if the css file. Clear the cache and try again.

回答6:

use below code

.background { background-image: url("../Images/backimage.jpg"); background-position: inherit; }

回答7:

Keep it simple stupid.

At all times, try to stick to relative paths with css url attribute.

/* Assuming your Site.css is in the folder where "Images" folder is located */
/* Your Css Image url */

background-image: url("Images/YourImageUrl");

The problem with wrong urls is that css can't locate that image as it doesn't understand the convention used on that url, hence the image is not displayed. So to keep it simple use the reigning relative path approach, and you'll never have problems.

回答8:

For anyone experiencing a similar problem with a razor page. You can use your regular CSS form, you just need to play with your folder levels. This avoids having to do CSS inline.

• Using normal HTML/CSS

  body{background-image: url("images/sparks.jpg");}

• My folder structure for razor

  body{background-image: url("../../images/sparks.jpg");}

回答9:

This Works For Me

     <div style="background-image:url('/images/home.jpg')">

AS i have images folder direct in my project so i used in url

          /images/image.jpg 

like

   <div style="background-image:url('/images/image.jpg')">

来源：https://stackoverflow.com/questions/9821921/css-background-image-refuses-to-display-in-asp-net-mvc