MVC Cannot Display Image Using Background-Url in CSS - Uses Bundling

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.

CSS Background-Image refuses to display in ASP.Net MVC

The url inside a CSS file is relative to the location of the CSS file.

So if we suppose that you have ~/content/foo.css and you want to include ~/images/foo.png here's how to reference it inside foo.css:

background-image: url(../images/foo.png); 

Don't use any ~ inside a CSS file. It has no meaning.

So in your case if the CSS file is ~/Content/Site.css and you want to reference ~/Content/Images/Designs.png the correct syntax is:

background-image: url(images/designs.png); 

If this doesn't work for you there might be different causes:

• The image doesn't exist at that location
• You didn't specify width and height to the containing element so you don't see the image

What I would recommend you is to use FireBug and inspect the corresopnding DOM element to see exactly what styles and images are applied to it.

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 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()));

Why is Windows Azure adding '/bundles/' into all of my css image file paths?

Why is Windows Azure adding '/bundles/' into all of my css image file paths?

Your CSS file is getting bundled. ASP.NET is putting your CSS file into a new file and storing it at mydomain.net/bundles/somefile.css. The web browser is looking for your image relative to the CSS files location.

This is only happening on Azure because bundling only runs in release configuration not in debug configuration. So, you can test bundling locally by setting <compilation debug="false" /> in your web.config file.

What is the best way to remove ... this problem?

Take a look at this: MVC4 StyleBundle not resolving images and this MVC cannot display image using background-url in css - uses bundling, or just do not use bundling. :)

MVC jQuery UI CSS urls not resolving after deployment

Ufuk's answer got me thinking. Appending the app name to the front of the bundle's virtual path broke all my styles.

The bundle function takes all the CSS files inside the include statement and minifies them into one file located at the URL specified in the bundle's virtual path. The urls specified in the CSS files included in this bundle uses the bundle's given virtual path to build up its URL at runtime. This works fine in dev because dev does not utilize the bundles, it references each css file individually/directly.

The solution was to create a bundle with the correct virtual path:

bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
                    "~/Content/themes/base/jquery-ui.css")):

Thanks Ufuk for the advice and guidance.

Cannot display text on image in ASP.Net MVC page

try adding:

  bottom: 10px;

inside .bottom-left1

---

Related Topics