ASP.NET MVC 4 Minification & Background Images

ASP.NET MVC 4 Minification & Background Images

Might have a look at RequestReduce. It's another .net based minifier/bundler and it will rewrite all urls in the minified/bundled css to be absolute. This includes fonts and background images. It will also automatically expand any imports in the css. Additionally, where it thinks it can, it will sprite the background images.

MVC4 Bundling misdirect background-image url

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

MVC4 StyleBundle not resolving images

According to this thread on MVC4 css bundling and image references, if you define your bundle as:

bundles.Add(new StyleBundle("~/Content/css/jquery-ui/bundle")
                   .Include("~/Content/css/jquery-ui/*.css"));

Where you define the bundle on the same path as the source files that made up the bundle, the relative image paths will still work. The last part of the bundle path is really the file name for that specific bundle (i.e., /bundle can be any name you like).

This will only work if you are bundling together CSS from the same folder (which I think makes sense from a bundling perspective).

Update

As per the comment below by @Hao Kung, alternatively this may now be achieved by applying a CssRewriteUrlTransformation (Change relative URL references to CSS files when bundled).

NOTE: I have not confirmed comments regarding issues with rewriting to absolute paths within a virtual directory, so this may not work for everyone (?).

bundles.Add(new StyleBundle("~/Content/css/jquery-ui/bundle")
                   .Include("~/Content/css/jquery-ui/*.css",
                    new CssRewriteUrlTransform()));

MVC Bundling and Minification: converts embedded images to to URL paths

Scrap that question. This is a known bug. Currently work around is to separate your css into embedded images and images via url.

Vote for these work-items: https://aspnetoptimization.codeplex.com/workitem/88 and https://aspnetoptimization.codeplex.com/workitem/108

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

I found out what the issue was.

It was indeed the bundling and minification used in MVC. When the css was looking for images, it was looking in the folder that my bundle was pointing to as the current folder, rather than the folder the css file is located in.

mvc bundling and relative css image when website is deployed to an application

If there are no virtual directories involved the following code would do:

bundles.Add(new StyleBundle("~/bundles/css").Include(
                "~/Content/css/*.css", new CssRewriteUrlTransform()));

but when VirtualDirectory is used CssRewriteUrlTransform will rewrite to Host instead of Host/VirtualDirectory. the solution is to derive CssRewriteUrlTransform which is fully discussed here: ASP.NET MVC4 Bundling with Twitter Bootstrap:

public class CssRewriteUrlTransformWrapper : IItemTransform
{
    public string Process(string includedVirtualPath, string input)
    {           
        return new CssRewriteUrlTransform().Process("~" + VirtualPathUtility.ToAbsolute(includedVirtualPath), input);           
    }
}

---

Related Topics