CSS multiple backgrounds work inconsistently

As you may be aware, transparent is a color value and not an image value, just like blue. Since it's a color value, it must be specified last in the background shorthand, and only there, because only the base layer may have a background color. This is why Chrome's Web Inspector is reporting an invalid property value with what you have.

Unfortunately there isn't a way to use multiple backgrounds to specify a single background image and an area of it that's cut out (e.g. to reveal a see-through opening in the mid-section).

What you have on jsFiddle is a step, though. You can easily do away with the extra div elements altogether by adding ::before and ::after pseudo-elements to both html and body instead, so you have four pseudo-elements to work with. You'll also need to use background-size and background-position to adjust the gradient backgrounds appropriately so they look seamless.

Since you want the gradients to be semitransparent while remaining seamless, you need to prevent them from overlapping. This is easily accomplished by adjusting the offsets as well as background-size accordingly.

Here's the CSS I've used:

html::before, html::after, body::before, body::after {    display: block;    position: fixed;    background: linear-gradient(45deg, rgba(255, 0, 0, 0.5), rgba(0, 255, 0, 0.5));    content: '';}html::before, html::after {    height: 25%;    left: 25%;    right: 25%;    background-size: 200% 400%;}body::before, body::after {    width: 25%;    top: 0;    bottom: 0;    background-size: 400% 100%;}html::before { top:    0; background-position: top;    }html::after  { bottom: 0; background-position: bottom; }body::before { left:   0; background-position: left;   }body::after  { right:  0; background-position: right;  }

jsFiddle preview (with borders to show how I've arranged the pseudo-elements)

You won't be able to do this with just one box, so yes, it may not perform well on mobile devices. If this doesn't work too well, then you may be able to use an SVG background to achieve this, or failing that, you may have to fall back to using traditional pre-rendered background images.

The CSS background shorthand property syntax is as follows:

background: background-color background-image background-repeat background-attachment, background-position

Note that there aren't any commas, so it's best not to use them, especially when separating background-color and background-image.

Using all this and going back to the original example: http://dabblet.com/gist/5340042