Gradient not showing in Internet Explorer (IE8 - other versions unknown)

A few common reasons a gradient image shows in Firefox but appears as plain white in Internet Explorer: an invalid background shorthand (IE can be stricter about parsing), an incorrect image URL (CSS urls are resolved relative to the stylesheet), or an earlier syntax error that causes the rule to be ignored. @almostbob's note about path resolution is relevant; the checklist below helps isolate the cause.

• Confirm the stylesheet is loading and the image request succeeds (use IE's developer tools or a network trace).
• Try a minimal test (only an HTML page with the background rule) so other CSS can't interfere.
• Split the shorthand into separate properties while debugging (background-color, background-image, repeat, position). That prevents one malformed token from invalidating the whole declaration.
• Verify the image URL by opening it directly in the browser and remember paths in url() are relative to the CSS file location, not the HTML.

Example patterns that are robust across browsers:

body {
  background-color: #cccccc;
  background-image: url('/path/to/gradient-image.jpg');
  background-repeat: repeat-x;
  background-position: top;
}

For modern browsers, prefer CSS gradients with vendor fallbacks and a solid-color fallback for older IE:

background-color: #cccccc;
background-image: -webkit-linear-gradient(top, #ffffff, #cccccc);
background-image: linear-gradient(to bottom, #ffffff, #cccccc);

For IE8 and older, use an image fallback or an IE-only stylesheet rather than relying on CSS3 gradients. If the problem persists after these checks, run the stylesheet through a validator and isolate the earliest rules in the file — an unrelated syntax error earlier in the CSS can prevent later rules from applying. This approach complements the path checks suggested earlier and helps prevent similar cross-browser surprises.