- This topic has 5 replies, 2 voices, and was last updated 3 years, 4 months ago by
.
-
Posts
-
Hi team,
First up, apologies if you have answered this before. I’ve scanned a range of linear-gradient posts in here and just haven’t quite been able to achieve what I’m after, and it mostly comes down to me being a beginner/dabbler (I only redesign my own website as and when it needs it, not multiple sites at a pro-level).
I would love to learn how to recreate the gradient over background image effect used here: https://joeabercrombie.com/
I just think it looks really stylish, but while I’ve managed to get the gradient to show, I haven’t been able to get it to slide over the image the way this one does, so I must still be missing something!
Love you work, team. Your help forums are an amazing resource.
Customer Support
Hi,
The difficulty you’re having w/ this is from how the layout is structured and where the background is applied.
Consider mimicking the DOM structure of the reference size so we can easily replicate how the CSS is applied.
We can do that by using GenerateBlocks Containers or Grid Blocks and applying the background image and gradient on these containers rather than having the image fixed on the
<body>tag.Thank you. I have seen mention of GenerateBlocks in the forum; will check it out!
No problem.
I believe you don’t even have to do CSS with this particular one as Background Gradient is added to GenerateBlock’s block settings within Gutenberg editor. It’s a nice tool to have. 🙂
Right. I got it. I have, at this stage, added the background image to only my Home page using CSS, and then used GenerateBlocks containers to do the gradient over top. If there is a more elegant way to do this, feel free to share.
I ran into one hiccup where I lost the gradient in a container for some reason and could not figure out why or how to get it back, so dragged all its contents into a new container that does work. Seems odd. Regardless, all working now.
Thanks.
Right. I got it. I have, at this stage, added the background image to only my Home page using CSS, and then used GenerateBlocks containers to do the gradient over top. If there is a more elegant way to do this, feel free to share.
The best way to do these kinds of things is to do everything within the UI first, as much as possible.
This, in some sense is the more elegant way as its simple and it didn’t have to resort to any customization (CSS). 🙂
Glad you were able to make it work. No problem. 🙂
- You must be logged in to reply to this topic.