This tutorial will show you how to add a tinted background to your Weebly video header. In addition, this tutorial will also show you how to turn your video to grayscale for a cool contrast with the tinted background.
Step 1. Open The HTML/CSS Editor
Clickon "THEME" at the top, then click on "Edit HTML/CSS" on the left.
Step 2. Add new cSS Code
On the left, click on your CSS file (e.g., main-style.css or main.less) and add the code below to it.
Note: To change the color of your tinted background, replace the bold text below with your rgb color code. You can convert a hex color code to an rgb color code here. To change the transparency of the tinted background, adjust the orange code below.
In terms of layering, the tinted background is now on top of the drag and drop area, rendering it inaccessible. To put the drag and drop area back on top, simply add the bold code to the code below. The code below will already exist in your CSS file.
"I write a review very infrequently, but Weeblytricks deserves one. Chris went above and beyond to make sure he understood the scope of what we wanted and provided a great product in a very timely manner. Will use again and would recommend!" - Arthur, 8/17/17
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.