My CSS images are not working on Windows Azure

Question

I have a really strange situation where the CSS images are not displayed after the site is deployed to Windows Azure.

1. The images are part of the project (all the files and sub-folder are included in the project)

2. All images have a build action of Content

3. I'm not using relative path, always use absolute path on my views /content/path/to/images, but on CSS there is relative path url(../img/image.png) but this should not be a problem.

4. Static files are OK (CSS and Javascript work correctly), except for the images not showing up.

I deployed using git, but even with the Publishing Wizard I get the same result.

The images are there if I request them with the full path. This is "unreal" ;)

I'm must be neglecting a key thing here, but can't find it. Thanks for your time.

Edit:

The image work via the img tag. So only the CSS images, which make no sense, they are working correctly locally.

I guess I can share the link, so you can see this thing live ;)

http://receivably.azurewebsites.net

Look at the top left logo, nothing appear, here is the HTML and CSS (this was working well a couple of deplyment ago, and work fine locally.

<a class="brand" href="/">name</a>

In the CSS:

.navbar .brand {
    display: block;
    width: 180px;
    height: 34px;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 2px;
    margin-left: 10px;
    overflow: hidden;
    font-size: 18px;
    line-height: 600px;
    color: #333;
    background: url(../img/logo.png) no-repeat 0 0;
}

And if we request the file directly it's there: http://receivably.azurewebsites.net/content/site/img/logo.png

The CSS file is placed in /content/site/css and images on /content/site/img.

May I add that I'm now unable to git push. Only the publishing wizard work. I've having LOTS of problem with that website on Azure, my other 3 app work flawlessly.

Answer 1

I think your css bundler is breaking things.

Here's what I see in your bundled CSS from the homepage (I've de-minified it a bit):

.brand
{
    display:block;width:180px;height:34px;padding-top:0;padding-bottom:0;margin-top:2px;
    margin-left:10px;overflow:hidden;font-size:18px;line-height:600px;color:#333;
    background:url(../img/logo.png) no-repeat 0 0
}

Notice: background:url(../img/logo.png) which may not be correct from the CSS which is executing from /bundles/

It should say:

../content/site/img/logo.png

Or as you said /content/site/img/logo.png

This would explain why it works locally (non bundled) and even in prior deployments -- because bundling related code may have changed recently. This is a classic release-time issue and it's one reason why turning on bundling full time (not just in Release mode) is wise, even though it takes an extra 0.500 seconds at Compile time. :-)

Hope that helps.