Archived topic
GB Headings Z-Index with GP header.
5 replies · Started by FunkyCss on September 12, 2022
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.
Hi there,
did you find a solution as the URL i see has the Heading behind the image?
Let me know.
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
You can try target the background image:
.gb-container-21c4d2eb:before {
z-index: 10;
}Hi,
This is excacly what I did but it will make the buttons inside unclickable.
Sorry missed that part :P
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;
}