How to add Image Background Behind the Category Title

Hi there,

You'd need to create a header element:
https://docs.generatepress.com/article/header-element-overview/

The basic structure would be this:

<div class="hero-columns">
    <div class="hero-column-1">
            image here
    </div>

    <div class="hero-column-2">
            text-here
    </div>
</div>

and CSS:

.hero-columns {
    display: flex;
}

.hero-columns > div {
    width: 50%;
}

@media (max-width: 768px) {
    .header-section > div {
        width: 100%;
    }
}

A second option would be to use background image like this:
https://docs.generatepress.com/article/page-hero-examples/#example-3

Let me know if this helps :)

But that's the category and not a page!

Hi there,

the method that Leo provides works for Page, Post or Archive ( Category ).
You just need to select the Category Archive you want in the Header Elements > Display Rules

What will the code for adding image? Should I have to upload the image first into my cpanel?

So you're code will look like this:

<div class="hero-columns">
    <div class="hero-column-1">
            <img src="add_the_full_URL_to_image_here" alt="Alt Text" width="400" height="400">
    </div>

    <div class="hero-column-2">
            text-here
    </div>
</div>

Simply add the image to your Media library, select the image and get its URL, then add the URL to this line of the above code:

<img src="add_the_full_URL_to_image_here" alt="Alt Text" width="400" height="400">

All done, everything looks good. But yet remains a problem. When I load the page on mobile, the image should appear first and the text below the image. But in actual, both are appearing side by side and text looks messy.

Use this CSS instead:

.hero-columns {
    display: flex;
}

.hero-columns > div {
    width: 50%;
}

@media (max-width: 768px) {
    .hero-columns > div {
        width: 100%;
    }
    .hero-columns {
        flex-direction: column;
    }
}

Still the same! I have inserted this CSS in the main Style.css of the child theme...

Can you provide a link to the page where i can see the problem?

It's http://www.friedcoffee.com

Made a change to the CSS here

When I am resizing the browser, it is not acting responsive. Also when I checked in the Appeareance > Customize> Mobile View and Tab View, but there also not responsive!

I guess there was some copy-paste error, now works fine!

Awesome - glad to hear that :)