Archived topic
Setting the gradient of page-hero backround-image overlay
1 reply · Started by Ben on June 1, 2021
Hi,
In elements > headers, I can see the option to select a "Background Overlay", and a corresponding "Background Color". I then notice that this outputs a background-image gradient, eg:
background-image: linear-gradient(0deg, rgba(211,211,210,0.1),rgba(211,211,210,0.1))
against class ".page-hero"
Is it possible to use a gradient with 2 values, or modify the gradient further, eg to
linear-gradient(-90deg, rgba(255,0,0,0.1),rgba(0,255,255,1))
can this be done via a function?
Many thanks
Ben
Hi Ben,
The more updated way to create a page hero is to use a block element - page hero, you can set two colors gradient background there.
This article should be helpful: https://docs.generatepress.com/article/block-element-page-hero/
The only function in Header element that the Block element doesn't have is to merge header and page/page hero.
If you want to merge the block element with header, then this video should help:
https://www.youtube.com/watch?v=TP8mgBQTgGg
Let me know :)
