Problems with combining a single background, with a color/gradient and border in a list element

[Sunamena]

Hello everyone. Thanks in advance for helping me again. It is very much apreciated.


This is what i have:

 

 

 

 

 

And this is what i want to achieve:

 

 

 

 

It is a <li> element.
How do i make the background color/gradient start 10% after rge background image?
Same for the border.




Thankyou very much =D

[Nikolas96]

you can use linear gradient. and use rgba color to set opacity of first 10% of background color to 0.

like this:

linear-gradient(to right, rgba(255,0,0,0) 10%, rgba(255,0,0,1) 10%);

use this code start bg color start 10% after rgb bg image...

Edited August 28, 2016 by Nikolas96