Hide the page title with background image

General
1

Hey all,

I installed the theme today to start a project and have a question about the behavior of the header image. I’m only 1 day in so forgive me if this an easy question, but I couldn’t find a solution that worked…
Customizer is used for primary header image & everything above that “More” block displays in the Header Image area. Check.

How do you create a page with No Header Image? I tried removing the “More” block but the image still persists (see screen shot)
Screenshot 2023-01-28 at 7.35.36 PM

2

Hi,

Yes, if there’s no header content area defined via the Read More block, the page displays its title with a background image. You can hide it using this CSS snippet:

.header-hero--title {display:none!important}

1 Like
3

Hi,
I have the same problem,
there is no way to remove the title background without snippets? I would not like to slow down the web with too many snippets.

Thanks!

4

Hi,

Unfortunately, no other option exists; please try to use a CSS snippet.

5

ok, but if I define the header content area via the Read More block, does it show the same effect? I’m looking for an alternative way to snippets.
If yes, what´s the right way to do it?

Thanks

9

Hi,

We still recommend using a CSS snippet, which does not affect the site’s speed. The page title is always displayed if you do not have a Read More separator.

10

Is background what I want not to show,
It’s the same?

14

Hi,

If you need to hide the background, please try this CSS snippet:

.header-hero--title {background: none !important}

15

Sorry, I have limited knowledge in web development. where should i put that snippet? I want to remove the image from specific pages, in this case, from the privacy policy page only.
Thanks

16

Hi,

Please provide more details on which image you want to remove (you can send a screenshot of the image and a link to your website). And we will try to help you.

17

Url:
https://playzzi.com/politica-de-privacidad/
In this page, not in home.

Thanks

18

Removing the background would require further changes (e.g. changing font color since it will not be visible). To hide the page title, you can use this CSS:

.header-hero--title{display:none!important}

To hide the background image, this CSS may help:

.header-hero--title{background-image:none!important}

19

Yes, but where I should, write this code?
(Sorry, I have limited knowledge in web development. where should i put that snippet? I want to remove the image from specific pages, in this case, from the privacy policy page only.)
Thanks

20

Please try adding it to Appearance/Customize/Additional CSS. This snippet will hide the page titles globally, to make it specific you can use this one:

.page-123 .header-hero--title{display:none!important}

Replace 123 with the page ID.

21

Sorry, there is something Im doing wrong:

is not working for me

23

Please try this one instead:

.page-id-431 .header-hero--title{display:none!important}

24

wow, this is more difficult than I expected.
Now the background photo has already been removed, but the background itself continues…:

is there any way to remove all title backgrounds?

thanks

26

You can try background:none!important or display:none!important to hide the title altogether. Please consider hiring someone for specific design customizations https://fvrr.co/32e7LvY

27

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.