Background Image with Linear Gradient

Question

I have a couple questions about Linear Gradient:

Is it possible to have an actual image rather than colour display instead of either the #000000 of #ffffff ?

background-image: -webkit-linear-gradient(30deg, #000000 50%, #ffffff 50%);  

Also would it be possible in the above example (which is black for 50% width then a 30 degree vertical split then white for 50%), so if the image replaced #000000, is it possible to place a border on the right hand of the image along the 30 degree divide that seperated the image and colour?

Thanks!

Answer 1

I am not sure I got right what do you need, but here is an example.

 .gradient-image { width:128px; height:128px; background: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 60%, rgba(0,0,0,1) 61%, rgba(0,0,0,1) 65%, rgba(0,0,0,0.7) 66%, rgba(0,0,0,0.7) 100%), url(https://i.stack.imgur.com/ZXvxw.jpg?s=128&g=1); }

 <div class="gradient-image"></div>