Background Image “Failed to load url” from CSS in MVC4 deployed in IIS 7.5

Question

In my MVC application, I refered a CSS file to render a background image for the page. I tried with all types of possibilities such as

background: url(../Images/login-box-backg.png) no-repeat left top;
background: url(../../Images/login-box-backg.png) no-repeat left top;
background: url(~/Images/login-box-backg.png) no-repeat left top;
background: url(./Images/login-box-backg.png) no-repeat left top; works only in Firefox
background: url(/Images/login-box-backg.png) no-repeat left top;

background-image: url(/Images/login-box-backg.png) no-repeat left top;
background-image: url(../Images/login-box-backg.png) no-repeat left top;
background-image: url(../../Images/login-box-backg.png) no-repeat left top;
background-image: url(~/Images/login-box-backg.png) no-repeat left top;
background-image: url(./Images/login-box-backg.png) no-repeat left top; 

But It shows failed to load the given url and network error 404 in both Firefox and IE9.
CSS file * login-box.css *

#login-box {
    width:333px;
    height: 352px;
    padding: 58px 76px 0 76px;
    color: #ebebeb;
    font: 12px Arial, Helvetica, sans-serif;
    background: url(../Images/login-box-backg.png) no-repeat left top;
}
.reg_body
        {
            background-image: url(../Images/plain-blue-background-images-7117.jpg);
        }

The style reference in my View as

<link href="@Url.Content("~/CSS/login-box.css")" rel="stylesheet" type="text/css" />

Which is the correct format to render background image from CSS file to MVC View.
I wonder why it doesnt accept anyformat when hosted in IIS.
Any suggestions.

Answer 1

Dont give this type of URL

background-image: url(../Images/plain-blue-background-images-7117.jpg);

use this one

background-image: url(/Images/plain-blue-background-images-7117.jpg);

if its not work...then try to remove slash /Images/ to Images/

Answer 2

Move your Images folder to the Content folder, and use this in your CSS:

background-image: url(Images/login-box-backg.png) no-repeat left top;

Your folder structure should look like this:

• Content
  -- Images
  ---- login-box-backg.png
  -- Site.css