Step 1. choose your theme's original header image

Hover your mouse over your header image and choose "Edit Image". Then select the image in the top left corner and click save.

---

Step 2. open the hTML/CSS editor

Click on "Design" at the top and then select "Edit HTML/CSS on the bottom-left.

---

Step 3. Upload your header image

On the left, click "ASSETS>Upload File(s)..." to upload the image you'll be using in your header.

---

Step 4. find header image code

On the left, choose "main-style.css". In the top, click the "search" icon to find your header image's code. For this specific demo site, we're using the short header page layout. We're searched "short".

---

Step 5. delete CSS coding

Now you're going to delete the "background" line of code.

---

Step 6. Add CSS coding

Replace the line of coding you deleted in the last step with the coding below. Change the text in orange to the name of the file you uploaded in Step 3.

background-image: -webkit-linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url('smoothie.jpg'); /* For Firefox */

background-image: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url('smoothie.jpg'); /* For Chrome & Safari */

---

Step 7. convert your HEX color to RGB

Assuming your already have a HEX color in mind you'd like to tint your header image to, you'll need to convert it to RGB. Go to hex.colorrrs.com to convert your HEX color to RGB.

For this demo site, we've converted the HEX color #3366cc to rgb(51,102, 204).

---

Step 8. Add RGB color to CSS coding

Now add the RGB color code you've just obtained to the code you installed in Step 6 4x as shown below in orange. We're adding rgb(51,102,204).

background-image: -webkit-linear-gradient( rgba(51, 102, 204, 0.5), rgba(51, 102, 204, 0.5) ), url('smoothie.jpg'); /* For Firefox */

background-image: linear-gradient( rgba(51, 102, 204, 0.5), rgba(51, 102, 204, 0.5) ), url('smoothie.jpg'); /* For Chrome & Safari */

---

You're done! 
Publish your site to see your header image's new tint!

---

Tip & Additional information

You're definitely not limited to just a solid tint color for your header image. Here are a few additional ways to spice up your header image.

Use 2 colors instead of 1

We've kept our original RGB color code from Step 8, but this time we added another one for dual colors. The second color was added to the text in orange.

background-image: -webkit-linear-gradient( rgba(51, 102, 204, 0.5), rgba(0, 153, 0, 0.5) ), url('smoothie.jpg'); /* For Firefox */

background-image: linear-gradient( rgba(51, 102, 204, 0.5), rgba(0, 153, 0, 0.5) ), url('smoothie.jpg'); /* For Chrome & Safari */

Make the tint lighter or darker

You can increase the lightness or darkness of the tint by simply adjusting the last number in the code. Lightest 0.1 - darkest 0.9.

background-image: -webkit-linear-gradient( rgba(51, 102, 204, 0.9), rgba(0, 153, 0, 0.9) ), url('smoothie.jpg'); /* For Firefox */

background-image: linear-gradient( rgba(51, 102, 204, 0.9), rgba(0, 153, 0, 0.9) ), url('smoothie.jpg'); /* For Chrome & Safari */

Make your header image grayscale

A more trendy look is to add a tint to a grayscale image. All we did was upload a new image that we applied a grayscale filter to, then we reduced the darkness of the two colors. The changes can seen below in orange.

background-image: -webkit-linear-gradient( rgba(51, 102, 204, 0.3), rgba(0, 153, 0, 0.3) ), url('smoothiegray.png'); /* For Firefox */

background-image: linear-gradient( rgba(51, 102, 204, 0.3), rgba(0, 153, 0, 0.3) ), url('smoothiegray.png'); /* For Chrome & Safari */

Download Photoscape for a free grayscale filter.

---

comments powered by Disqus