Geek asks and answers

MVC cannot display image using background-url in css - uses binding

I have an MVC4 project that has the following structure:

/Content/css/sprites/topbar.css

/Content/images/topbar.png

In the css file, I am trying to reference an image using:

background: url('../../images/topbar.png')

But the image is not displayed. If I change it so that the image is in:

/Content/css/sprites/topbar.png

And change the css as follows:

background: url('content/css/sprites/topbar.png')

it works, but it violates my project structure.

Any ideas?

EDIT

I didn’t mention anything else since I didn’t think it mattered, however it seems to affect it!

@System.Web.Optimization.Styles.Render("~/MainStyles") css, , , . , ?

+5
4

, .

, MVC. css , , , , css.

+4

, - . css. , css. MVC css .

:

bundles.Add(new StyleBundle("~/Content/css/sprites/topbar")
              .Include("~/Content/css/sprites/topbar.css")
            );

@Script.Render("/Content/css/sprites/topbar")

Mvc css, , /Content/css/sprites/topbar?{some-crazy-token-thing}

+8

:

.social ul li a.blog { background: url(@Url.Content("~/Content/img/houseIcon.png")) no-repeat left top; }

CSS . http://www.codeproject.com/Articles/171695/Dynamic-CSS-using-Razor-Engine

+3

CSS- , , , CSS, CSS.

If your application is always located in the root directory of the website, you can use the root paths (for example, background-image: url ("/content/images/toopbar.jpg");)

Hmm, but then "../images/topbar.png" should also work. Have you tried this?

+1
source

More articles:


All Articles