Exchanged colors of opaque border on gradient background

Question

I try to apply an opaque border to a div with a gradient background. However, the result is rather unexpected to me since the top and bottom colors seem to become exchanged.

html:

<div>
    Test
</div>

css:

div {
    background: -moz-linear-gradient(center top , blue, red);
    background: -webkit-linear-gradient(top , blue, red);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

http://jsfiddle.net/dULyt/

Answer 1

Update

Using background-size property set to something bigger than 100% (e.g. 110%)

DEMO

div{
    background: -moz-linear-gradient(center top , blue, red);
    background: -webkit-linear-gradient(top , blue, red);
    border: 1px solid rgba(0, 0, 0, 0.1);
    background-size:110%;
}

---

It's not 'exchanging' or anything. The background is simply repeating itself.
You have to add no-repeat to your background property.

DEMO

div {
    background: -moz-linear-gradient(center top , blue, red) no-repeat;
    background: -webkit-linear-gradient(top , blue, red) no-repeat;
    border: 1px solid rgba(0, 0, 0, 0.1);
}