Page banner instead of page title

You’re using the commercial theme, The7. Looking at this page on the theme’s demo site, it should be easy to achieve what you want without writing any custom CSS code (which can cause some unintended consequences). But we don’t have access to commercial themes like yours here at www.remarpro.com, so it’s impossible for us to show you how to do this visually from the theme’s configuration options.

I’m going to try my best to help you do this using custom CSS code.

But you may be better off asking for help from the theme’s author (or the marketplace where you purchased the theme from) to do it visually, instead of using custom code. Please see: https://themeforest.net/item/the7-responsive-multipurpose-wordpress-theme/5556590/support

If you really want to do this with custom CSS code, try this in ADDITIONAL CSS section of APPEARANCE => CUSTOMIZE,

.home .page-title {
background: url(https://www.njoyz.nl/wp-content/uploads/2021/05/Banner-Njoyz.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
height: 400px;
text-indent: -999px;
}

Due to the aspect ratio of your image, I had to increase the height of the area to get all the text in the image to show. (The width and height of the area are respectively 1280px and 200px, so you may create a banner that is perfectly sized to fit this area, and there’ll be no need to use the height property then.)

The negative text-indenting takes the title text off-screen, but still “visible” to screen readers and search engines.

Please note that this might require some fine-tuning to get it perfectly right, and I’m hanging in here for any changes you may need. I’m also aware that it’s definitely not OK on mobile screens: I just want us to get the desktop view right before tackling the mobile view.

Standing by to help — if you need any further help ??