After writing the how-to article on the Full Width Parallax Featured Image, theres one question I get asked a lot. How do I change the transparent overlay to a gradient overlay? The answer is actually quite easy. The hardest part is choosing the colour or colours, and opacity.

If you haven’t already, apply the full width parallax featured images to you X Theme or Pro Theme. It’s a few very simple steps to follow here, or download the X and Pro Child Themes below with it pre-installed.

Now we’ve got that out of the way, lets get down to business.

To change the transparent overlay on the full width parallax featured image to a gradient overlay, locate the below CSS:

.featured-image:after {
background: rgba(96, 124, 138, 0.85);
}

Simply choose a new colour. For example, change rgba(96, 124, 138, 0.85) to rgba(139, 195, 74, 0.85).

The 4th number in the RGBA sequence is relating to the transparency. 0 being completely transparent, and 1 being a solid colour. Play with the transparency to see what looks good on your site.

New gradient overlay CSS would look something like:

.featured-image:after {
background: rgba(139, 195, 74, 0.85);
}

Simply choose the colours you’d like to use in your gradient. This part can be difficult as the options are endless. If you need some gradient inspiration, check out UI Gradients. Also W3 Schools has a great breakdown of everything to do with gradient overlay CSS (linear and radial).

Now change

background: rgba(96, 124, 138, 0.85);

to

background: -webkit-linear-gradient(to bottom, rgba(96, 124, 138, 0.85), rgba(139, 195, 74, 0.85));
background: linear-gradient(to bottom, rgba(96, 124, 138, 0.85), rgba(139, 195, 74, 0.85));

The linear gradient overlay CSS should look like this:

.featured-image:after {
background: -webkit-linear-gradient(to bottom, rgba(96, 124, 138, 0.85), rgba(139, 195, 74, 0.85)); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to bottom, rgba(96, 124, 138, 0.85), rgba(139, 195, 74, 0.85)); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

Very simply delete the below code from the CSS.

.featured-image:after {
background: rgba(96, 124, 138, 0.85);
}

A linear gradient overlay, or even a transparent overlay isn’t a necessicity. It just looks awesome.

I like to imagine the gradient overlay as the following – Imagine your looking at a picture perfect landscape through a a pane of coloured glass. Still stunning while adding a new dimension to that image.

The linear gradient has many uses in Web Design.

• The single colour overlay or linear gradient assists in continuing your sites colour pallet.
• If the image isn’t the pages main feature or focus, it helps blend it into the background without distracting.
• The gradient background adds a nice little design touch to your already beautiful site
• And it just looks bloody awesome

Why would you use one over the other? Absolutely no reason at all except your own personal preference, and what suits your website/brand.

The single colour overlay is what I use on this site (benryan.com.au) and also what I have included in the Full Width Parallax Featured Image. It’s the style that best suits my site and simple to add.

For example, below is the CSS and an example of how it looks. Hover over the below image to see the original image:

.featured-image:after {
background: rgba(96, 124, 138, 0.85);
}

The linear gradient overlay adds yet another layer to a featured image or background. Rather then a simple flat colour, you can combine 2, 3, 4 or even more colours to created the style your looking form.

Need more colour inspiration? There is some beautiful examples here.

For example, below is the CSS and an example of how it looks. Hover over the below image to see the original image:

.featured-image:after {
background: linear-gradient(to bottom, rgb(96, 124, 138), #67b26f);
}

By now, you’ve downloaded your free copy of the X and Pro Child Themes pre installed with the full width parallax featured image. You also have the know-how on changing the transparent overlay CSS or even going for a linear gradient overlay.

In the comments below, be sure to share a link to your site so we get to see what you’ve created.

Here are a few more posts you might be interested in or if you prefer, feel free to check out my ongoing support packages 🙂