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

Question

I am having trouble displaying an background image in my ASP.NET MVC 2 application. Currently, In ~/Views/Shared/Site.master, I set my link to the style sheet to:

Answer 1

In my case I had to back out to the root and include a path to the Content directory.

So even if my directory structure looked like:

-Content
--css
---site.css
--img
---someImg.png

I couldn't do

background-image: url(../img/someImg.png)

I had to do:

background-image: url(../../Content/img/someImg.png)

This worked locally in debug mode (no minification) and deployed to AWS (with minification) correctly.

Also, don't forget if you're using Bundle minification and you use @import in your CSS to still include the asset in the bundle. For example:

main.css
@import url(../../Content/css/some.css)

Be sure to include some.css in your bundle:

 bundles.Add(new StyleBundle("~/Content/global").Include(
                 "~/Content/css/some.css",
                 "~/Content/css/main.css"));

No need to do this if you're using LESS or SASS bundlers as the handler knows how to find the files and include them (that's the point!); however, if you're doing it as a straight CSS import, the bundler won't know to include it when it minifies.

Hope this helps someone!

Answer 2

This Works For Me

     <div style="background-image:url('/images/home.jpg')">

AS i have images folder direct in my project so i used in url

          /images/image.jpg 

like

   <div style="background-image:url('/images/image.jpg')">

Answer 3

If you use bundles and have the directory structure like :

-Content
--lightbox
---css
----lightbox.css
---imgages
----close.png

then you can make a separate bundle for content in subdirectories by defining the bundle in that subdirectory:

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


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

Answer 4

use below code

.background { background-image: url("../Images/backimage.jpg"); background-position: inherit; }

Answer 5

Keep it simple stupid.

At all times, try to stick to relative paths with css url attribute.

/* Assuming your Site.css is in the folder where "Images" folder is located */
/* Your Css Image url */

background-image: url("Images/YourImageUrl");

The problem with wrong urls is that css can't locate that image as it doesn't understand the convention used on that url, hence the image is not displayed. So to keep it simple use the reigning relative path approach, and you'll never have problems.

Answer 6

For anyone experiencing a similar problem with a razor page. You can use your regular CSS form, you just need to play with your folder levels. This avoids having to do CSS inline.

• Using normal HTML/CSS

  body{background-image: url("images/sparks.jpg");}

• My folder structure for razor

  body{background-image: url("../../images/sparks.jpg");}