[Resolved] z-index not working

[HansRuedi]

Please have a look at…
https://schwarzaufweiss.ch

That’s the brush stroke related part in my style.css of my child theme:

.brush {
position: relative;
background: #fff;
overflow: hidden;
}
.brush #post-22 h1 {
position: relative;
z-index: 2;
}

.brush:after {
content: ‘ ‘;
display: block;
position: absolute;
left: 0;
top: 0;
width: 90%;
height: 90%;
z-index: 1;
opacity: 0.4;
background-image: url(‘https://schwarzaufweiss.ch/wp-content/uploads/2022/05/brush-stroke.png’);
background-repeat: no-repeat;
background-position: 50% 0;
background-size: cover;
}

I found no way to have typo (Media Services) on top of the brush stroke. What wrong with my code?

Many thanks for help,
Hans

[Ying]

Hi Hans,

1. add z-index: 1; to .bursh.

2. .brush #post-22 h1 this selector is not targeting anything, you can remove it.

3. change the z-index of .brush:after to -1.

[HansRuedi]

Hi Ying,

yesss, first class support, as always!

Many thanks,
Hans

[Ying]

You are welcome 🙂

[HansRuedi]

Hi there,

Ying solved my initial problem. I would like to go one step further. If you have a look at my site you will see that the yellow brush stroke is masked below baseline of h1. I couldn’t find a way to make it visible on top of the following margin (bottom, 10px) and paragraph («von schwarzaufweiss…).

That’s my actual css:

.brush {
	position: relative;
	z-index: 1;
}

.brush:after {
    content: ' ';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 90%;
    height: 90%;
    z-index: -1;
	opacity: 0.7;
    background-image: url("https://schwarzaufweiss.ch/wp-content/uploads/2022/05/brush-stroke.png");
    background-repeat: no-repeat;
    background-position: 50% 0;
    background-size: cover;
}

Thanks for a hint!
Hans

[David]

Hi there,

so the pseudo element needs to have a defined ‘height’ so you can define how the background image should fit it.
For example this CSS:

.brush::after {
    content: ' ';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    opacity: 0.7;
    background-image: url("https://schwarzaufweiss.ch/wp-content/uploads/2022/05/brush-stroke.png");
    background-repeat: no-repeat;
    background-position: 0;
    background-size: contain;
}

This sets the pseudo element size to exactly that of the H1, and then we make the background-size: contain; – so here you see 100% of the background image but its size is defined by the H1 height.

Or this CSS:

.brush::after {
    content: ' ';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    padding-top: 26%;
    z-index: -1;
    opacity: 0.7;
    background-image: url("https://schwarzaufweiss.ch/wp-content/uploads/2022/05/brush-stroke.png");
    background-repeat: no-repeat;
    background-position: 0;
    background-size: contain;
}

Where we set the psuedo to width: 100% of the H1 width, but define its height using padding-top: 26%;. 26% being the aspect ratio of the original imaage

So you could now scale it down by 50% eg.

.brush::after {
    content: ' ';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 50%;
    padding-top: 13%;
    z-index: -1;
    opacity: 0.7;
    background-image: url("https://schwarzaufweiss.ch/wp-content/uploads/2022/05/brush-stroke.png");
    background-repeat: no-repeat;
    background-position: 0;
    background-size: contain;
}

[HansRuedi]

Thank you, David

[David]

You’re welcome

[Author]

Posts