CODEWITHSUNDEEP
htmlasp.net-mvccssasp.net-mvc-4
Ben Junior
Ben Junior

Reputation: 2589

background image url doesn't work on production server

In the VS 2013 localhost the background image works perfectly using the following settings:

.body-content {
    padding-left: 15px;
    padding-right: 15px;
    height: 100%;

    background-image: url("/Content/Img/MainPageBackground.jpg");

    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: 100% 100%;
    background-position: center;
}

But after deployed to the production server (IIS7) the background image doesn't show. Since the image now is stored in a different location, I know that the url path must be updated accordingly.However, I have tried all path combinations without success. The new location of the image in the server is

C:\App\Clients\HDC\Client\Content\Img\MainPageBackground.jpg

This didn't work neither any shortened combination of it.

background-image: url("C:/App/Clients/HDC/Client/Content/Img/MainPageBackground.jpg")
background-image: url("/App/Clients/HDC/Client/Content/Img/MainPageBackground.jpg")

and so on....

NOTE: The virtual directory is "C:\App\Clients\HDC\Client"

Upvotes: 2

Views: 3563

Answers (2)

Faust
Faust

Reputation: 15404

There are 3 posiblities:

  • You've mis-spelled the file-name or part of the path
  • You've not included the file in the project, or it has a build-action of "none" (check the file properties in VS) so it is not present in the deployment package
  • You've deployed the project such that the application root directory is a sub-site of the host-name (e.g. www.myhostname.com/site-name/)

In the first 2 cases, the fix should be clear. In the last case (and in any case), I would strongly recommend bundling your stylesheet(s) and specifying the path to your stylesheet using this syntax:

background-image: url("~/Content/Img/MainPageBackground.jpg");

Note the tilde (~) before the path.

Upvotes: 1

bezzoon
bezzoon

Reputation: 2019

One thing you can do is try to look for the file on the server!

For intstance type in the url site.com/Content/Img/MainPageBackground.jpg

and see if that behaves as you'd expect it

Also I would recommend using all lower case, windows is case-insensitive but other OS's usually are case sensitive!

= )

EDIT

OH I GET IT. Don't use a / before Content unless you want to go to the root directory! So remove the / and try!

background-image: url("Content/Img/MainPageBackground.jpg");

if you need to take a few steps back and move up directories that is done like this

background-image: url("../../Content/Img/MainPageBackground.jpg");

but there isn't enough info to tell what you need exactly = )

Upvotes: 1

Related Questions