MVC4 Linking Invalid Background Image Address

Question

I have this binding configuration:

bundles.Add(new StyleBundle("~/styles/style1").Include("~/Content/library/styles/style1.css") 

Then I added this code to display the related CSS:

 @Styles.Render("~/styles/style1") 

My CSS has this content:

 .style1 { background-image: url("../img/image.png"); } 

Due to linking, the path of the background image is not correctly directed to ~ / Content / library / img / image.png instead of ~ / img / image.png. I do not want to edit the path to the CSS file because many other pages use it. Do you know about any solution or lack of configuration in the kit?

Answer 1

You will need to apply CssRewriteUrlTransform to fix this:

 bundles.Add(new StyleBundle("~/styles/style1") .Include("~/Content/styles/style1", new CssRewriteUrlTransform()) 

Alternatively, you can also use absolute paths in style sheets.

PS: As indicated in the comments, you must add the strong> Web Optimization Package to your project through Codeplex or NuGet in order to be able to use the CssRewriteUrlTransform class