Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
  • #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:
    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?


    Hey markvanhaze,

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

    Best regards,
    Jordan Shannon


    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:

    .avia-fullscreen-slider .avia-slideshow {
        left: -40vw;
        margin: 0;
        position: relative;
        transform: translate(50vw);
        width: 80vw;

    Hello Jordan,

    I would prefer using a color section for the caption.



    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=” (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


    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 2 years, 3 months ago by  markvanhaze.

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


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



    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


    or try to make it with advanced layerslider plugin – the parallax effekt and for text you can do everything you want.:


    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.