Root directory in CSS in a ASP.NET MVC

Question

I have an using ASP.NET MVC 4.5 that uses some css files. The css refers to some images.

The css file Is located in this path:

WebSiteRoot\Content\css\services\File.CSS

The image is located in this path:

\WebSiteRoot\Content\img\servicesbubble\image.png

The css has this calling:

background:transparent url('../../img/servicesbubble/image.png') no-repeat 0px 0px;

When I run the app in the localhost it works. But when I upload to the hosting (Appharbor) It doesn't work. Why? What is the best way to reffer to the root of an app?

In the server the http get is tried to this wrong URL

WebSite.com/img/servicesbubble/desktop.png

Update: I am using the .NET framework 4.5 feature called bundling for merge these CSS with another CSS.

Could you share URL of your AppHarbor hosted site so that we can have a look? — Michal Klouda
– Michal Klouda, Commented Aug 24, 2012 at 17:26
file references from a css file shouldn't be a problem if the paths don't change between environments. — JayC
– JayC, Commented Aug 24, 2012 at 17:27
Of course @Michal this it the url tulpepwebsite.apphb.com/Services Check the wrong callings to tulpepwebsite.apphb.com/img/servicesbubble/desktop.png and tulpepwebsite.apphb.com/img/servicesbubble/uc.png — Ricardo Polo Jaramillo
– Ricardo Polo Jaramillo, Commented Aug 24, 2012 at 17:27
Try url('/content/img/servicesbubble/image.png') in the css. The opening / denotes the root folder. — Luke Hutton
– Luke Hutton, Commented Aug 24, 2012 at 17:32

Ben Lesh · Accepted Answer · 2012-08-24 17:36:35Z

2

Your problem is actually coming from the fact you're minifying the css to a different directory than the CSS originally existed in.

More specifically: http://tulpepwebsite.apphb.com/Content/css/servicescss?v=sdm08D5sRu2I00dA0phyVTYZ_QU8Nfp27wHtmmE0Gzk1

So ../../ puts you at http://tulpepwebsite.apphb.com/Content

Urls in CSS files are always relative to location of the CSS file itself.

answered Aug 24, 2012 at 17:36

Ben Lesh

109k47 gold badges251 silver badges233 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ricardo Polo Jaramillo Over a year ago

I dont think so. The minification and bundling in MVC 4.5 allows this.

JayC Over a year ago

Does bundling rewrite the paths in the minified CSS? (clarification)

JayC · Accepted Answer · 2012-08-24 17:39:21Z

2

Your paths to the CSS files seems to change. The two CSS files I see related to your website are http://tulpepwebsite.apphb.com/Content/css/servicescss?v=sdm08D5sRu2I00dA0phyVTYZ_QU8Nfp27wHtmmE0Gzk1 and http://tulpepwebsite.apphb.com/Content/GeneralCSS?v=9kvtUcooQua0D4nQT8wZ-4_Gm6OcRd-J5SkjMxwKiyQ1. (The other is from the google fonts service.) You need to figure out why that's happening.

Edit: Ok, I'm going to guess something. You're probably using the new ASP.NET 4.5 bundling feature. But it doesn't make sense to bundle CSS flies in different directories, if you're doing that.

edited Aug 24, 2012 at 17:39

answered Aug 24, 2012 at 17:32

JayC

7,1612 gold badges30 silver badges42 bronze badges

1 Comment

Ricardo Polo Jaramillo Over a year ago

I am using the bundling feature of ASP.NET 4.5, and I am not bundling css in differente directories. I have sense in term of compress and simply your code.

Michal Klouda · Accepted Answer · 2012-08-24 17:33:44Z

0

Your CSS location is different than you think:

WebSiteRoot\Content\css\File.CSS

instead of

WebSiteRoot\Content\css\services\File.CSS

answered Aug 24, 2012 at 17:33

Michal Klouda

14.6k7 gold badges58 silver badges79 bronze badges

Collectives™ on Stack Overflow

Root directory in CSS in a ASP.NET MVC

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related