MVC4 Bundling misdirect background-image url

Question

I have this bundling configuration:

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

Then I added this code to render the bundled CSS:

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

My CSS has this content:

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

Due to bundling, the path of background image is misdirected to ~/Content/library/img/image.png instead of ~/img/image.png. I don't want to edit the CSS file path because many other pages are using it. Do you know of any solution to it or am I missing a configuration in bundling?

Answer 1

You're gonna need to apply the CssRewriteUrlTransform to fix this:

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

Alternatively, you can also use absolute paths in your stylesheets.

P.S: As stated in the comments, you have to add the Web Optimization Package to your project through Codeplex or NuGet to be able to use the CssRewriteUrlTransform class