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.

Vin

You have good notes in your question, indicating you covered the bases but can you please provide some code. The HTML (or just the URL to your site) would be helpful and easy to help troubleshoot. – Feline

I've added a link so you can see this in action. Can't wait to get enlighted I must say. – Vin

Does it work if you deploy it to an IIS web server (instead of Azure). I'm asking to see if it's something Azure-specific. – Systematize

Actually, if it's the "Reboot Landing" image you're talking about, I can see that when I visit the site through the site link. Oh, don't worry, lo, I didn't see that the problem had been solved (I diudn't read far enough down). – Systematize

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.

Feline

Indeed it was the case. Thanks for the solution. – Vin

I have the exact same situation. But I look at the content using chrome sources (and de-minified), it still the same background: url(images/info.png) no-repeat center center. What should I do? What is the correct path? – Thenna