MVC Bundling and CSS relative URLs

by

CssRewriteUrlTransform updates the CSS Url with absolute path, saying so if we use –

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

and we have following CSS class in “site.css”

.Sandy
{
    background-image: url("Images/Sandy.jpg");
    border: 1px solid #c8c8c8;
    border-radius:4px 4px 4px 4px;
    box-shadow: 1px 1px 8px gray;
    background-position:left;
    background-size:contain;
    -moz-background-size:contain;
    -webkit-background-size:contain;
    -o-background-size:contain;
    background-repeat:no-repeat;
    min-height:100px;
    min-width:100px;
    display:block;
}

and following folder structure –

   -Web site Root
   -Content
   --site.css
   --Images
   ---Sandy.jpg

Bundling will generate following CSS Url Path for “background-image” – 

 background-image: url("/Content/Images/Sandy.jpg");

And now if you hosting the website / web application as a website on web server above path will work,
because browser will send request for this resource using following Url because of leading “https://stackoverflow.com/”

http://<server>/content/images/sandy.jpg

but if you host the website as web application this will create problem. Because browser will still interpret this as absolute Url instead of relative and still send following request to fetch this resource –

   http://<server>/content/images/sandy.jpg

So, the solution for this problem is using the relative Url even in CSS file and then remove the CssRewriteUrlTransform from the Bundle config as below – 

background-image: url("Images/Sandy.jpg");

bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));

More Related Contents:

  1. How to use relative/absolute paths in css URLs?
  2. How to reference a .css file on a razor view?
  3. How do I apply a CSS class to Html.ActionLink in ASP.NET MVC?
  4. How do I add a class to an @Html.ActionLink?
  5. Dynamic CSS for ASP.NET MVC?
  6. Prevent content from expanding grid items
  7. Click through div to underlying elements
  8. Position deeply nested elements in a higher level grid container
  9. Why don’t :before and :after pseudo elements work with `img` elements? [duplicate]
  10. CSS Property Border-Color Not Working
  11. Browsers’ default CSS stylesheets
  12. HTML 5 strange img always adds 3px margin at bottom [duplicate]
  13. CSS: center element within a element
  14. Create a Masonry grid with flexbox (or other CSS)
  15. What is the current state of the “scoped” attribute for the style element in HTML5?
  16. Does IE 8 have a limit on number of stylesheets per page?
  17. Bootstrap: align input with button
  18. Replace input type=file by an image
  19. Vertical and horizontal align (middle and center) with CSS [duplicate]
  20. Apple-like scrollbars using CSS
  21. How do I extend a class/mixin which has dynamically formed selector
  22. Without media queries how to achieve 3 column desktop to 1 column mobile layout
  23. Reuse CSS animation in reversed direction (by resetting the state?)
  24. Make table cells square
  25. Setting different lengths for grid gaps in CSS Grid
  26. Why box-sizing is not working with width/height attribute on canvas element?
  27. Center fixed div with dynamic width (CSS)
  28. How to use images in css with Webpack
  29. Row Wrap in flex-box not wrapping in Safari
  30. Visual Studio 2013 – No Visual Basic/Visual C# Web Templates Installed

Leave a Comment