Home/ Questions/Q 6772549
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T15:33:44+00:00

Yes, another IE fallback question. ;-) I had a look at the others here

  • 0

Yes, another IE fallback question. 😉 I had a look at the others here at SO and most of them were not for multiple backgrounds.

IE<9 does not have support for multiple backgrounds, while IE>=9 does. For both, I am perfectly fine not even having them “multiple” but rather having them simply tile an image for fallback.

Here’s my existing CSS:

.main_accent { 
  background-image: url('../img/background.png');
  background-repeat: repeat;
  background-image: url('../img/fringe.png'), -webkit-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9)), url('../img/background.png');
  background-image: url('../img/fringe.png'), -moz-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0), rgba(0,0,0,0.9)), url('../img/background.png');
  background-position: bottom, center, center;
  background-repeat: repeat-x, no-repeat, repeat;
  padding-bottom: 40px;
}

The first background-image and repeat declaration are for the older browsers. Then is a multiple-background image declaration for Webkit and one for Mozilla. These work fine, along with their accompanying position and repeat.

The “images” need to be in this order, because first the tile is filled in, and then the gradient is overlayed, then a bottom “fringe” (similar to the pinking shears effect we’ve all seen) finishes off the bottom.

The problem is that with IE9 or greater, multiple backgrounds ARE supported, but vendor prefixes are of course ignored. This makes IE9+ use the plain non-multi “background” rule, but with the first position and repeat options (bottom, repeat-x). I tried simply having another background-image with the same image 3 times, but that was no good.

Any ideas?

[update:]
used shorthand, but still no luck. IE wants to use that repeat-x at the bottom regardless:

.main_accent { 
  background: url('../img/background.png') repeat;
  background: url('../img/fringe.png') repeat-x bottom, -webkit-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9)) no-repeat center, url('../img/background.png') repeat center;
  background: url('../img/fringe.png') repeat-x bottom, -moz-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0), rgba(0,0,0,0.9)) no-repeat center, url('../img/background.png') repeat center;
  padding-bottom: 40px;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Well, FWIW here’s what I ended up doing:

    #wrapper > .container:first-child { 
  background: #69000c url('../img/background.png') repeat;
  background: url('../img/fringe.png') repeat-x bottom, -webkit-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9)) no-repeat center, url('../img/background.png') repeat center;
  background: url('../img/fringe.png') repeat-x bottom, -moz-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0), rgba(0,0,0,0.9)) no-repeat center, url('../img/background.png') repeat center;
  background: url('../img/fringe.png') repeat-x bottom, -o-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%,rgba(0,0,0,0.9) 100%), url('../img/background.png') repeat center; /* Opera 12+ */
  background: url('../img/fringe.png') repeat-x bottom, -ms-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%,rgba(0,0,0,0.9) 100%), url('../img/background.png') repeat center; /* IE10+ */ 
  padding-bottom: 40px;
}

    I didn’t make an exception for IE in terms of a filter. MS browsers that support the standard declarations and radial gradient properties (the forthcoming IE10) will be fine. Otherwise I found no more clever option than good ol’ conditionals:

    <!--[if lte IE 9]>
  <style type="text/css">
#wrapper > .container:first-child {
    background: #69000c url('/wp-content/themes/roots/img/background_darker.png') repeat;
}
  </style>
<![endif]-->

    Because my radial gradient darkens things up significantly, I made a new tiling pattern that was universally darker. This was preferable to the ‘base’ tiling pattern which was a bit too bright when simply tiled.

    In IE9 or less I obviously don’t worry about the “fringe” effect either. Could do it with an additional div, but it’s not necessary. A straight line was graceful enough deprecation for me. Also important to put the conditional AFTER the original stylesheet so that it can properly “override” what came before.

    • 0