Now, something I’d like to try is put the banner image as a background image to the banner section, with the banner’s .title and .content on top of it. But that’s beyond my skills. I’ve tried asking for help to a couple LLMs, but their answers are too generic.
So, if someone here can help me out that would be great. Thanks!
From what I can see, this theme has no documentation about its configuration options at all. So, it might not be the best choice for a Hugo newbie. Since Hugoplate does come from a company, they might be the best source to answer your questions.
Aside: I would suggest that newbies start with a minimal theme or none at all, building whatever they need themselves. That way, they know (or at least can learn) what’s going on and how/which wheels are turning.
As to your original question: I’d create a flex box containing the image (not as a background-image, though), the title, and the content as children. It’s fairly easy to position the text then.
Thank you for your answer. I already sent a request to the company (Zen Studio), but since I don’t know how much it will cost me to get their help, or how long it would take to get a response from them, I figured I could ask here as well.
And thanks for your suggestion to create a flex box, I’ll try that.
I found a not perfect but good enough solution. Instead of using a flex box, I modified the html layout for the home page, in which the banner is defined. It uses some tailwind css, and by moving the image div before the title and content, removing the image’s sizing parameters and playing with the title and content div position I was able to get pretty much the result I wanted.
The “solution” I found earlier is not great, it works okay until I open the page on a large screen, then the image is enlarged and overlaps the following section.
In the tailwind documentation, I found that there is an easy way to define a background for any section or div. It can be a colour or or an image. I’m now able to see the effect of changing the background to the banner section with class="bg-pink-500" for example (I can change the colour to pink successfully). But if I try to provide the url to the image with class="bg-[url(/assets/images/banner.jpeg")] the image is not displayed. I tried to set the image url relative to the html file, but still nothing.
I have a section of my site with code like that. Try it and replace img/bg.jpg with your own in the assets directory. Make other changes to your liking.
<header class="relative flex justify-center items-center mt-5 w-full h-[80vh] overflow-hidden text-center">
{{- with resources.Get "images/bg.jpg" }}
{{- with .Process "Fill 1080x720 webp Center" }}
<img class="top-0 left-0 z-0 absolute w-full h-full object-center object-cover" src="{{ .RelPermalink }}" alt="" width="{{ .Width }}" height="{{ .Height }}">
{{- end }}
{{- end }}
<div class="z-10 relative bg-black/90 px-5 py-15 rounded-md text-white">
<h2 class="pb-8 font-sans-bold text-4xl leading-none">Lorem Ipsum Dola Sit Amet</h2>
<p class="pb-10 font-sans-bold text-xl">Lorem Ipsum Dola Sit Amet</p>
<a href="/categories/" class="inline-block">Categories</a>
</div>
</header>
Adjust those valies. If you don’t need webp or centred image, remove webp Center. Also h-[80vh] also controls the height. Remove or use Tailwind CSS defaults.
Even if your solution works, my problem is that I have a multilingual site, and your solution works for only one language, or at least not easily with more than one language.
For now I’ll leave the image after the text, but I hope I can find a good solution.
Now I just have to figure out how I can combine the blurred text box background combined with a gray tint to make a better separation from the image background.