Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #1307888

    Hi,
    i actually stuck with an issue. I want to set an image in backgroung and scroll (by mouse) a fullscreen text block with halftransparent background over this image. Basically i would set image and text in one color section and set it as parallax but here the textblock nackground would not be 100% from browser border to browser border, only in the container.

    So i set one color section with the image as background and below a second color section with the text and the black background. It scrolls like i want it but i cannot set the bg of the thex transparent, it seems that always the background color of the page container lays below so the background color becomes grey
    … as here: https://ibb.co/RTW1Q4p (left: my page / right: should be)
    This is the setup in Backend: https://ibb.co/C6DKYnZ

    Any idea?

    • This topic was modified 2 months, 3 weeks ago by  xeovision.
    #1307957

    Hey Sebastian,

    Thank you for the inquiry.

    Are you trying to limit the width of the background? Have you tried applying the background image or color to a 1/1 column element instead of applying it to the color section? Please provide a link to the page so that we could check it.

    Best regards,
    Ismael

    #1307962

    Not limit set to the width.
    Login added to PM

    #1308047

    Hi,

    Thank you for the update.

    We added a 1/1 column element inside the color section and move the text inside it. We then applied a background color to the column and set the transparency to 50%. Is that what you are trying to do?

    Best regards,
    Ismael

    #1308067
    #1308078

    if the section on top – had to be less than 100% screen height, there will be a tricky way to have that:
    we gave to body itself a background-image !
    same layout setting – top section got custom-class: transparent-section and height is determined by alb setting ( 50% or anything you like )

    result: https://webers-testseite.de/xeovision2/

    css code for that page-id of mine is:

    #top.page-id-40352 {
      background-image: url(/wp-content/uploads/nature-3082832_1920.jpg);
      background-repeat: no-repeat;
      background-size: cover;
    }
    
    #top.page-id-40352 #wrap_all {
      background-color: transparent !important
    }
    
    #top.page-id-40352 #main {
      overflow-x: hidden;
      height: 100vh;
      background-color: transparent !important
    }
    
    #top.page-id-40352 .avia-section.transparent-section {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        display: flex !important;
        justify-content: center;
        align-items: center;
        background-color:  transparent !important;
    }
    

    One thing to mention here : the shrinking header does not work anymore – due to set the #main container to 100vh

    #1308223

    Similar way – but with shinking header in action:
    https://webers-testseite.de/xeovision3/


    ___________________
    adjust it to your page-id !

    #top.page-id-40389 {
      background-size: 0 !important;
      overflow: hidden;
      position: relative;
    }
    
    #top.page-id-40389:before {
      background-image: url(/wp-content/uploads/nature-3082832_1920.jpg);
      background-repeat: no-repeat;
      background-size: cover;
      content: "";
      position: fixed;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      z-index: -1 !important;
      will-change: transform;
      pointer-events: none;
    }
    
    #top.page-id-40389 #wrap_all {
      background-color: transparent !important
    }
    
    #top.page-id-40389 #main {
      background-color: transparent !important
    }
    
    #top.page-id-40389 .avia-section.transparent-section {
        background-color:  transparent !important;
    }

    The trick via before pseudocontainer is that it is a container set to fixed position – and not that body has a background-attachment : fixed. some Browser do react on that with jitter (Safari)

    #1308389

    Cool .. this works excellent.
    Many thanks

    • This reply was modified 2 months, 3 weeks ago by  xeovision.
    #1308421

    Hi,

    I’m glad this was resolved. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

Viewing 9 posts - 1 through 9 (of 9 total)

The topic ‘Parallax effect with text over image’ is closed to new replies.