This tutorial will show you how to tint the header image of your Weebly site. Tinting your header image allows you to further compliment your theme's color, spice your header up, or to make headline text within the header stand out better.
The prominent color of this demo site is#3366cc. We're going to tint the header image of this demo site to this color.
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.
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.
Weebly Tricks is a third-party Weebly 'after market' site providing tutorials, apps, and widgets for Weebly sites. Weebly Tricks is not affiliated with Weebly, Inc in any manner. Not all tutorials work for every site and may require additional customizing. Always save your files before editing.