[Resolved] z-index not working

Home Forums Support [Resolved] z-index not working

Home Forums Support z-index not working

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #2218779
    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

    #2218805
    Ying
    Staff
    Customer Support

    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.

    #2218809
    HansRuedi

    Hi Ying,

    yesss, first class support, as always!

    Many thanks,
    Hans

    #2218830
    Ying
    Staff
    Customer Support

    You are welcome 🙂

    #2221089
    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

    #2221382
    David
    Staff
    Customer Support

    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;
    }
    #2221700
    HansRuedi

    Thank you, David

    #2221991
    David
    Staff
    Customer Support
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.