Archived topic
Header background gradient to 0% opacity?
9 replies · Started by Stephen on July 11, 2021
I'm using the Catalyst template from site library. This question is about the "home header" element.
I want an image in the hero area (image will have transparent background), and add a background image, and I want the background image to have a gradient to 0% opacity.
So the primary navigation at the top of the home page would just have white behind it, because the background image would have 0% opacity at that point.
I don't want just an image with the gradient; I want to use a large version of my logo image, and add a background image (background has gradient). Thus, with the parallax effect, they would sort of move independently (I think).
How do I do this? Add css to the existing header element? Or set up the hero element differently?
Thanks.
Hi Stephen,
I'm not sure I fully understand what you are trying to achieve, is there any example site for our reference?
Let me know :)
Not without a lot of searching.
Which part isn't clear, maybe I can clarify it better.
The Element settings in Home Element (Catalyst template from GP site library) allow me to pick a background image and background color overlay. I want an image in the hero area and a background color/image behind it. It's the same idea, of using layers.
1. Image with transparent background (svg or png). So the transparent parts of the image show the background color or image behind it.
2. Background image or color. But I want to set the opacity to gradiate to 0% at the top of the background.
So at the bottom of the hero you see image and background. At the top, behind the header area, you only see the image, because the background is 0% opacity.
In this case, you just need to add the <img> HTML to the content area of the header element and set a background image and background color.
When you link us to the site, we can help with some CSS to make the gradient background color.
Thanks. I was just wondering if adding the <img /> (instead of the existing button) would work.
link is in the "private information" area.
Thanks.
Hi there,
i can't see the link in the private info - can you re-add it ?
yes
OK - so might be best if you DO add the <img> to the Header Element - once its in place we may get a better understanding of what you're trying to achieve.
ok. Thanks.
Let us know once you have added it and re-share the link ( resolved topics remove private information ) and then we can go through the other changes you want to make :)
