How to create header like this

Hi there,

like your own site it is using a GP Header Element:

https://docs.generatepress.com/article/header-element-overview/

The red background image is just a background image set in the header element.
The content e.g the phone, in the case of Awaken is Elementor added by way of a short code in the header element.

It really shouldn't be no different to how you have your current site set-up.

And what pixel size(width and height) should you advice for such a background?

Awaken is only using a 960px width image, which 'works' for that image.
I am more inclined to use a 1600px+ wide image for full width header background images.

I'm testing out something like a curved header.

https://web-creations.nl/test/

Are able to explane why there is a thin line below the header?

Check in the Header Element and set the background color to 100% transparent.

Looks nice now, only the curved line is not perfect yet.

And the background from this header looks a little weird on my iphone.

Thanks for the help again.

You're welcome.
You may want to investigate using SVG's and how they can be absolutely positioned.

What do you mean by SVG's.

Have you got manuals?

SVG's are scalable vector graphics which are creating using Adobe Illustrator or your chosen vector design tool. To use them in WordPress requires a plugin:

https://en-gb.wordpress.org/plugins/svg-support/

This solely allows you to upload them as normal media attachments. As WP blocks them by default.

Theres a lot of tutorials if you google SVG in webdesign. This article covers some of the basics.
https://torquemag.io/2017/09/scalable-vector-graphics-wordpress/

Thanks David,

New stuff to learn and to become a better webdesigner.

Love it!
Cheerz

Glad to be of help :)