z-index not working

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.

Hi Ying,

yesss, first class support, as always!

Many thanks,
Hans

You are welcome :)

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

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;
}

Thank you, David

You're welcome