[Support request] How to add Image Background Behind the Category Title

[Amit]

Hi, I am willing to add some solid color background, an image to the left and text into the right side with Category title, something like homegrounds.co/coffee-recipes/. How can I do this?

[Leo]

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 🙂

[Amit]

But that’s the category and not a page!

[David]

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

[Amit]

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

[David]

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">

[Amit]

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.

[David]

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;
    }
}

[Amit]

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

[David]

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

[Amit]

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

[David]

Made a change to the CSS here

[Amit]

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!

[Amit]

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

[David]

Awesome – glad to hear that 🙂

[Author]

Posts