[Resolved] Adding background images (slider effect) in Home Hero Element?

Home Forums Support Adding background images (slider effect) in Home Hero Element?

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #1087217
    Fitron

    Halo team! I want to add a background image (slider effect) in the Home Hero Element, I have followed the guidelines HERE, but the look of a different home site makes my site look weird.

    I just want to add a few pictures (maybe 4-5) on desktop & mobile, can someone help?

    #1087247
    Leo
    Staff
    Customer Support
    #1087287
    Fitron

    Thank you Leo for responding

    Already implemented it with this drawn code: https://prnt.sc/q4iert and this CSS: https://prnt.sc/q4ieti
    My site: wayangpedia.com

    #1087369
    Fitron

    I just updated the CSS code, using this:
    ` .slider-hero {
    position: relative;
    }
    .background-slider {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    }
    .inside-page-hero {
    display: -ms-grid;
    display: grid;
    grid-template-areas: “left right”;
    -ms-grid-columns: 50% 50%;
    grid-template-columns: 50% 50%;
    }

    .page-hero-content {
    -ms-grid-row: 1;
    -ms-grid-column: 2;
    grid-area: right;
    }


    @media
    (max-width: 768px) {
    .inside-page-hero {
    display: block;
    }
    }

    @media
    (min-width: 768px) {
    .hero-title {
    position: absolute;
    top: 50%;
    right: 10%;
    transform: translate3d(0%,-50%,0);
    }
    }
    and setting these elements: https://prnt.sc/q4ja5f

    Almost perfect, the mobile display “custom search & h1” as I want.

    Now all that remains is to adjust the desktop display, can the team there help?

    #1088003
    Leo
    Staff
    Customer Support

    Is there a specific page where I can see this implementation?

    I’m still just seeing a background image in the page hero on home page.

    Let me know 🙂

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