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.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: