[Resolved] Background video / z-index

Home Forums Support [Resolved] Background video / z-index

Home Forums Support Background video / z-index

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #2355856
    Jan

    Hi David,

    I’d like the background video to run behind the image. See link to relevant page below.

    The CSS is as follows:

    /* GP Background Video - Add styles */
    
    .background-video {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        opacity: 0.5;
    }
    
    .background-video-content {
        position: relative;
        z-index: 1;
    }
    
    video[poster] {
        object-fit: cover;
        width: 100%;
        height: 100%;
    }

    The HTML embed code is:

    <video loop="1" muted="" autoplay="" playsinline="" poster="https://domain.de/wp-content/uploads/Standbild_Quader_webgefaehrte_1zu10_640.png" class="background-video">
        <source src="https://domain.de/wp-content/uploads/Animation_Quader_webgefaehrte_1zu1-vp9-chrome.webm" type="video/webm"> 
        <source src="https://domain.de/wp-content/uploads/Animation_Quader_webgefaehrte_1zu1-hevc-safari.mp4" type="video/mp4">
    </video>

    The image of the man sitting on the right is a background image of the first container.

    How do I need to adjust the z-index (inner or outer) to make the image come forward?

    Thanks,
    Jan

    #2355957
    Fernando
    Customer Support

    Hi Jan,

    We can’t seem to access the link you provided. Can you check if it’s correct and accessible?

    #2356051
    Jan

    Hi Fernando,

    thanks for pointing this out. The link in the initial post should be working now.

    Best,
    Jan

    #2356689
    Ying
    Staff
    Customer Support

    Hi Jan,

    Can you choose Pseudo elementas the selector for the background image?

    Let me know when it’s done so we can have another look ๐Ÿ™‚

    #2356701
    Jan

    Done. I changed the selector to Pseudo Element

    #2356926
    Ying
    Staff
    Customer Support

    Try to add this CSS:

    .header-top-border:before {
        z-index: 2;
    }
    #2357416
    Jan

    Works perfectly well, Yin. Many thanks

    #2357972
    Ying
    Staff
    Customer Support

    No problem ๐Ÿ™‚

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.