[Support request] GB Headings Z-Index with GP header.

[FunkyCss]

Hallo there,

I try to make a design for my new website and play around with Z-Index for a specific and modern layout.

I have used as a background Image in a container a .png image and a background color from GB.

What is in the main container is also a heading that sits in the background color and touches the .png image.

What I need to do is to move the Heading behind the .png image of my background.

I tried with css and it does not work.

[David]

Hi there,

did you find a solution as the URL i see has the Heading behind the image?

Let me know.

[FunkyCss]

Hallo There David,

I found a not good solution actually, I dit that on the inside container and that makes the button inside not clickable.

I now use one container and inside the TWO headings that I need to give the z-index with the class name – gradient-headline

I have updated the site can you take a look now?

gradient-headline {
z-index:2;
}

is not working

[Ying]

You can try target the background image:

.gb-container-21c4d2eb:before {
    z-index: 10;
}

[FunkyCss]

Hi,

This is excacly what I did but it will make the buttons inside unclickable.

[Ying]

Sorry missed that part 😛

In that case, I would recommend using a structure like this:
https://www.screencast.com/t/4Qo5rMw9iI

Then follow the settings below:

1. Set the outer z-index for the parent container to 1, container text to 1, container button to 3, container background image to 2.

2. Set container background image min-height to 100vh.

3. Set parent container inner container to Full width.

4. Add addition CSS class to container background image, eg. hero-bg, then add this CSS:

.hero-bg {
    position: absolute;
    bottom: 0;
    left: 0;
    top: 0;
    right: 0;
}

[Author]

Posts