UI looks different in localhost and hosted website(GoDaddy)

Question

I hosted my ASP.NET MVC website in GoDaddy, but the appearance looks a little bit different. My navigation bar that originally is black (the default of MVC 5), turns into blue. And my background image is not showing. What is the cause if this? Someone please help. Thank you. I already tried this for the background image:

background-image: url('Image/BG30.png'); ---This one works in localhost, but not in hosted website

background-image: url('/Content/Image/BG30.png'); ------Also works in localhost, but not in hosted website

background-image: url('../Image/BG30.png'); --- This one doesn't work in both

Answer 1

Your reference to images in the css file must be relevant to the css file's location. It might be a good idea to use absolute paths instead of relative paths. This article offers a good explanation of when and why to use absolute paths.

Relative: /Content/Images/BG30.png

Absolute: http://www.example.com/Content/Images/BG30.png

Example:

CSS File: example.com/Content/styles.css

BG Image File: example.com/Content/Images/BG30.png

background-image: url('Images/BG30.png'); would work because / and ../ move the path up to the root and up one level respectively. background-image: url('Images/BG30.png'); would work regardless of the correlation between the location of the two files.

It seems as if the hosted approot path differs from your local path. Using an absolute path to your css file and absolute paths to your images (within the css file), can solve any confusion as to the location of the files.

You should also make sure that you're uploading all the proper files (images included) to the proper location on the hosted site. Make sure that you're overwriting any existing files with the correct versions from the local path, this could be the cause of color issue.