Tagged: ,

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • April 11, 2017 at 4:56 pm #776181
    markvanhaze

    I would like to create a parallax background image which I can limit in size (lets say 25% of the browser window) and also display a caption text over it.
    I made a test page here: http://www.alwayswindy.com/blog/testing-page/
    The first image is a color section but there is no caption text option. The second image is a fullscreen slider where I added a caption but here I would need to limit its size to a percentage of the browser window.
    How can I solve that?

    April 11, 2017 at 5:26 pm #776205
    Jordan Shannon

    Hey markvanhaze,

    So you are saying you need to add a caption to the first (color section)

    Best regards,
    Jordan Shannon

    April 11, 2017 at 6:07 pm #776224
    Guenni007

    do you mean a percentage of width or height.
    Because the full-width slider did that have allready (the limitation to height).

    and the fullscreen-slider you can force it to have less width:
    f.e.

    .avia-fullscreen-slider .avia-slideshow {
    left: -40vw;
    margin: 0;
    position: relative;
    transform: translate(50vw);
    width: 80vw;
}
    April 11, 2017 at 6:11 pm #776228
    markvanhaze

    Hello Jordan,

    I would prefer using a color section for the caption.

    April 11, 2017 at 6:17 pm #776233
    Jordan Shannon

    Hi,

    You could add a column then text block to the color section. If you add a custom class. You should be able to style it as you need via the quick css.

    Best regards,
    Jordan Shannon

    April 11, 2017 at 6:20 pm #776234
    markvanhaze

    Thanks, that sounds good. How can I get the text to be inside a semi transparent box, as is the case with the slider below in my demo page) ? I.E. whats the CSS for that?

    April 11, 2017 at 6:31 pm #776243
    markvanhaze

    Guenni007: I mean percentage of height. I dont see that option in the fullscreen slider.

    April 11, 2017 at 6:41 pm #776248
    markvanhaze

    No worries guys – I sorted it with the use of columns on the color section. Topic closed.

    April 11, 2017 at 6:46 pm #776255
    Jordan Shannon

    Hi,

    I am glad we were able to help. If you need additional help please let us know here in the forums. BTW: Use the following for background transparency:

    div {
   background: rgba(200, 54, 54, 0.5); 
}

    Best regards,
    Jordan Shannon

    April 12, 2017 at 7:34 am #776508
    Guenni007

    or try to make it with advanced layerslider plugin – the parallax effekt and for text you can do everything you want.:
    https://webers-testseite.de/kokon/fullwidth-slider/

    April 13, 2017 at 8:32 am #777124
    Guenni007

    by the way – see here my experiment with color-section and in it a transparent layerslider : Testpage
    so you can take a color-section with background image (scroll, parallax etc.)
    and than do whatever you like with headings – other images etc.

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