Topic on Project:Support desk/Flow

I'm trying to change color layout. In Mediawiki:Common.css (or Vector.css) I've made some changes that work as expected. Apart from one issue. Using an in-line image or fixed image works as expected:

div.vectorTabs span {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAABkAQAAAABvV2fNAAAADUlEQVQIHWNoYBgWEACJ5TIB0K9KcAAAAABJRU5ErkJggg=="); 
}

However, a linear-gradient is repeated all over the tab:

div.vectorTabs span {
    background-image: linear-gradient( #fff6f6 0%, red 100%); 
}

What's wrong?

(MW 1.24.1 PHP 5.3.3)

I guess it has background-repeat: no-repeat, so images aren't repeated over the tab, but gradients are different since you can't specify the "length" of the gradient inside the element.

I can see the difference in size definition. But how can I prevent repetition altogether?

Using a local file

using a gradient

Tnx, found it ;-)

div.vectorTabs span {
   background-image: linear-gradient( #fff6f6 0%, red 100%); 
   background-size: 1px 60px;
}

The background-size was the missing link.

I found to remove these fading lines you add the following to Mediawiki:common.css:

div.vectorTabs span {
    background-image: none;
}
#left-navigation { display:none!important; }
#right-navigation { display:none!important; }