Geek Answers Handbook

Failed to load URL wallpaper from CSS in MVC4 deployed in IIS 7.5

In my MVC application, I referenced a CSS file to display a background image for the page. I tried to use all the features, 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 that the given URL and 404 network error failed to load 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); }

Reference to the style in my view as

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

What is the correct format for rendering a background image from a CSS file to MVC View.
I wonder why it does not accept anyformat when placed in IIS.
Any suggestions.

+4
source share
2 answers

Do not specify this type of URL

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

use this

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

if it doesn’t work ... then try deleting the slash / Images / in Images /

+3
source

Move the Images folder to the Content folder and use it 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
+1
source

More articles:


All Articles