CSS – Gradients and Images together

I really wanted to get the effect that you often see on nice looking sites like CNN where you have a gradient with a button in the corner of said gradient. Like the More buttons that you see.

This is a great tutorial on gradients.

https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_gradients

Here is the actual syntax that I used to make this work:

.pane-plain-box-bs1 h2 {
background: url(‘/sites/images/more-btn1.png’) no-repeat top right, linear-gradient(to bottom,rgba(161,161,161,0) 0,rgba(82,81,80,1) 100%);}

Note that I am doing this in the subthemed CSS file from Panels. One important thing to note is that you have to have the image listed BEFORE the gradient in the line. Otherwise the gradient will cover it up.