I’m using this code to display a full width background image with a transparent header.

.page-id-123 .site-header {
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    background-color: transparent;
} 

It works great, but I’m also using a full width and full height (100%vh) to display text and hero image. Using this code, the container gets pushed upwards and it’s no longer vertically centered.

Now I was able to fix it by adding padding to the container (and changing the amout of padding based on the screen size), but is there a better way to do it?

Sometimes it works, but later the proportions can suddenly change. Really don’t know how that happened.

Structure:
<group, fullwidth> <group, logo etc> no problems here

Again the <group, full width> and then <cover, with image, 1371x353px, alignment none, content position top/center>
then in the cover: <stack, justification center> then under stack <heading, h1><spacer><shortcode, Max Mega Menu>

The problem is that the image doesn’t stay on the full width and then strangely decorates the height. And so the h1 and menu. Things are not stable.

How do I solve this.

A good layout example is below.

I don’t want to use Elementor, which I know can do it.

Is there another way?

Regards
Drachsi

Also, my site isn’t launched yet, so not sure if that makes it more complicated to ask for help.

Thank you!

All I want to stretch the image under the header and make it a banner image on the homepage.

Any ideas?

Please help.

– I use for pages the template banner/no sidebar and I would like to translate the banner/featured image with TranslatePress. However, TranslatePress can’t recognize the banner/featured image and therefore can’t be translated. It does recognize the featured image though when I use the default template with the sidebar.

– My second option would be to put the image into the text and make it full-width. However, I expected the image to go over the full width of the page but it only goes until the end of the container (and therefore leaves some white space to the left and right). There is not difference between full width and wide width option.

Can you help me out with that?

Thank you!

Please offer any advice.

Thanks in advance.

Here is the page where you can see I added the parallax image into the page. https://brushwiththelaw.org just scroll down and you will see an image in black and white with a wood setting and pathway. I would like this to be full width using the Aesop Plug In

Any Help would be appreciated.

Thx,
Maria