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

by

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.

More Related Contents:

  1. Could someone explain this CSS code?
  2. What does the “~” (tilde/squiggle/twiddle) CSS selector mean?
  3. Is there any way to hover over one element and affect a different element? [duplicate]
  4. How to change an input button image using CSS
  5. Relationship between !important and CSS specificity
  6. Make a DIV fill an entire table cell
  7. Is there a CSS hack to affect Safari only NOT Chrome?
  8. Outlining and partially filling an SVG Shape
  9. Setting height: 100% on my label element doesn’t work
  10. Twitter Bootstrap – add top space between rows
  11. Should I use CSS :disabled pseudo-class or [disabled] attribute selector or is it a matter of opinion?
  12. Add a css class to a field in wtform
  13. How can I use CSS3 transform on a span?
  14. What is this CSS selector? [class*=”span”]
  15. Bootstrap 3 Slide in Menu / Navbar on Mobile [closed]
  16. Remove “whitespace” between div element
  17. What does the double colon (::) mean in CSS?
  18. CSS text-decoration underline color [duplicate]
  19. How to add fonts to create-react-app based projects?
  20. Is there an opposite CSS pseudo-class to :hover?
  21. Why isn’t my justify-content property working?
  22. Remove border radius from Select tag in bootstrap 3
  23. Combining border-top,border-right,border-left,border-bottom in CSS
  24. How to vertically align an image inside a div
  25. Why is filter(drop-shadow) causing my SVG to disappear in Safari?
  26. Media queries and background images
  27. Implement a CSS-only slideshow / carousel with next and previous buttons?
  28. Sass and rounding down numbers. Can this be configured?
  29. Using CSS to make table’s outer border color different from cells’ border color
  30. How to style menu button and menu items

Leave a Comment