Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #776181

    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?

    #776205

    Hey markvanhaze,

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

    Best regards,
    Jordan Shannon

    #776224

    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;
    }
    #776228

    Hello Jordan,

    I would prefer using a color section for the caption.

    #776233

    Hi,

    You could add a column then text block to the color section. If you (Purchase code hidden if logged out) -for-all-alb-elements/” href=”http://kriesi.at/documentation/enfold/ (Purchase code hidden if logged out) -for-all-alb-elements/”>add a custom class. You should be able to style it as you need via the quick css.

    Best regards,
    Jordan Shannon

    #776234

    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?

    • This reply was modified 7 months, 1 week ago by  markvanhaze.
    #776243

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

    #776248

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

    #776255

    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

    #776508

    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/

    #777124

    by the way – see here my experiment with color-section and in it a transparent layerslider : (Purchase code hidden if logged out) -it/”>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.

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

You must be logged in to reply to this topic.