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:

<link href="<%:@Url.Content("~/Content/Site.css") %>" rel="stylesheet" type="text/css" />

The image I plan to display is in my ~/Content/Images/Designs.png

Here is what I have tried

body
{
    background-image: url(~/Content/Images/designs.png); 
    background-repeat: repeat;  
    font-size: .75em;
    font-family: Verdana, Helvetica, Sans-Serif;
    margin: 0;
    padding: 0;
    color: #696969;
}

Other Tries Included:

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

none of the above tries worked. What can I do?

Milissa

Have you tried ../Content/Images/designs.png – Sneaky

Sorry, slip of the finger. I meant .. instead of ~. – Sneaky

You don't have any obscure "case sensitive file names" switch somewhere, do you? – Sneaky

the file's name is all-lower case. pretty positive – Milissa

Oh... you said the name was Designs.png and you tried to display it with designs.png. – Sneaky

Answer 1

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.

Wickiup

alright, point is , the images folder is in the content folder (where the css is), thats when I tried background-image: url(./Content/Images/designs.png); background-image: url(Content/Images/designs.png); background-image: url(Images/designs.png); – Milissa

Right, so the correct syntax is background-image: url(images/designs.png);. – Wickiup

@MrLister, yes this works. If it doesn't there are other reasons. Not because his url is wrong. – Wickiup

@EonRustedduPlessis Wait, are you saying you tried all these things at the same time? – Sneaky

headache ... XD I specified the width and height of the body now to 100% respectively. I changed my line to what you had there (images folder is capitalized, Images) – Milissa

@EonRustedduPlessis, casing doesn't matter if you host in IIS under Windows. – Wickiup

its still on local machine, and lister, no, did not use everything at once. – Milissa

its an Idea though. lemme switch on firebug. I have it installed – Milissa

How do you ANSWER SUCH A QUESTION :< What happened was, when I built my solution, it did not build, although it said build successful. I restarted visual studio 2010, built again, and it worked – Milissa

somehow, yes. seems like my VS2010 had issues building. doing "fake" builds, but not changing anything – Milissa

when I restarted, and built, it worked (was still in the notation darin gave me) – Milissa

for multi level folder try this background-image: url("themes/base/images/ui-icons_222222_256x240.png") – Computation

THANK YOU! This is exactly what I was needing to know. – Excellency

Answer 2

This is what I had to do:

background-image: url('@Url.Content("~/images/foo.png")')

Intramundane

This will work only if css is inline. Because by default we cannot use Razor code in .css files. If anyone knows the solution foe css files too, add it here please. – Misfortune

Nice, this worked for me as I was looking for an inline (to the cshtml) solution so my code looks like <option style="padding: 5px 0 5px 40px; background: #FFFFFF url('@Url.Content("~/Content/flags/flag-usa2x.png")') no-repeat left center;">USA</option> – Oriane

Perfect solution if you are using the CSS inside Razor as Zia says. – Moonfaced

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

Cytology

Answer 4

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!

Dogcart

Answer 5

I would recommend to just drag and drop the image. Visual Studio will generate the code automatically for you,

body { background-image: url('../../Content/Images/dark123.jpg'); }

This URL code is auto-generated by Visual Studio you don't need to write the code manually.

Hope this will fix your issue.

Cheers!

Kagu

Answer 6

It could be a caching issue in the browser; that is, the browser may cache an older version if the css file. Clear the cache and try again.

Sneaky

dont think it is, my buddy and I are both making the exact same application, we are practicing mvc. everything is still at default. now we started with the css, added Images folder to content folder, and added designs.png to the images folder. we changed the link in site.master to be deploy-friendly notation <%: Url.Content(.....) %> and changed the body tag: took out background-color and added background-image: url(Images/designs.png) – Milissa

So this is a brand new webpage? Is there at least some content in the body? – Sneaky

Ill upvote, as this was also 1 step i followed, not sure if it fixed it. the closest answer I had to the fix + learning something from it came from darin – Milissa

OK. Glad the problem's gone now! – Sneaky

Answer 7

use below code

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

Shin

This doesn't add anything that the other answers haven't already stated. – Ravelin

Answer 8

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')">

Amandaamandi

Answer 9

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.

Myriammyriameter

Answer 10

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");}

Schizophyceous

Answer 11

Had the same problem. Solved by adding double quotes in the URL specification:

No:

background-image: url(../images/ic_Chevron_bottom.svg);

Yes:

background-image: url("../images/ic_Chevron_bottom.svg");

Deposal