Sizes: Third, Half, Full screen. Area will auto-expand to forground text size.
Scroll Speed: Slow, Medium, Fast. Changes size of background image, effect of moving at different rates.
Background effect: Scroll with mouse, Scroll Reverse of mouse, Fixed background
Background inline styles: background, background-position, opacity
<div class="paralex (default:third|half|full) (slow|default:medium|fast) (default:scroll|reverse|fixed)">
<div class="background" style=" (everthing except background: url is optional)
background: url('https://...');
background-position: center center;
background-position-x: 50%;
background-position-y: 50%;
opacity: 0.3;
"></div>
<div class="foreground">
Content Content Content
</div>
</div>
Area will expand to fit content.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Feugiat nibh sed pulvinar proin. Ullamcorper velit sed ullamcorper morbi tincidunt ornare. Lorem ipsum dolor sit amet. Facilisi morbi tempus iaculis urna id. Porttitor lacus luctus accumsan tortor posuere ac. Faucibus in ornare quam viverra orci sagittis eu volutpat odio. At consectetur lorem donec massa sapien. Eu lobortis elementum nibh tellus molestie nunc non blandit massa. Nulla facilisi nullam vehicula ipsum a arcu cursus.
Facilisis volutpat est velit egestas dui. Molestie a iaculis at erat pellentesque adipiscing commodo. Facilisi cras fermentum odio eu. Posuere urna nec tincidunt praesent semper. Blandit aliquam etiam erat velit scelerisque. Ut consequat semper viverra nam libero justo laoreet sit amet. Amet dictum sit amet justo donec. Vulputate dignissim suspendisse in est ante. Euismod in pellentesque massa placerat duis. Amet aliquam id diam maecenas ultricies mi eget mauris. Sem et tortor consequat id porta nibh venenatis cras sed. Faucibus vitae aliquet nec ullamcorper sit amet risus nullam eget. Dictumst vestibulum rhoncus est pellentesque elit. Tellus in hac habitasse platea dictumst. Pellentesque sit amet porttitor eget dolor. Diam donec adipiscing tristique risus nec feugiat in fermentum posuere.
Turpis egestas maecenas pharetra convallis posuere. Et molestie ac feugiat sed lectus vestibulum mattis. Nam at lectus urna duis convallis convallis. Euismod quis viverra nibh cras pulvinar. Enim sed faucibus turpis in eu. Malesuada nunc vel risus commodo viverra maecenas accumsan lacus vel. Consectetur adipiscing elit pellentesque habitant morbi tristique senectus. Nulla porttitor massa id neque aliquam vestibulum morbi blandit cursus. Vel eros donec ac odio tempor orci dapibus ultrices. Egestas fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate sapien. In hac habitasse platea dictumst quisque sagittis purus sit amet. Suspendisse faucibus interdum posuere lorem ipsum dolor. Risus quis varius quam quisque id diam vel quam. Condimentum id venenatis a condimentum vitae sapien pellentesque habitant morbi. Ultrices dui sapien eget mi proin. Risus sed vulputate odio ut enim blandit volutpat maecenas. Tristique senectus et netus et. Ultricies tristique nulla aliquet enim tortor at. Aliquet nec ullamcorper sit amet risus nullam eget. Eros in cursus turpis massa tincidunt dui ut ornare.
Tristique magna sit amet purus gravida. Purus faucibus ornare suspendisse sed nisi lacus sed viverra. Est ante in nibh mauris. Aliquet risus feugiat in ante metus. Tempus iaculis urna id volutpat. Diam vulputate ut pharetra sit amet. Turpis cursus in hac habitasse platea. Nunc id cursus metus aliquam eleifend. Amet cursus sit amet dictum sit amet justo donec enim. Amet venenatis urna cursus eget nunc scelerisque. Sed nisi lacus sed viverra tellus in hac habitasse. Tincidunt nunc pulvinar sapien et ligula. Ipsum faucibus vitae aliquet nec ullamcorper sit amet risus. Facilisi nullam vehicula ipsum a arcu. Feugiat nisl pretium fusce id velit ut tortor pretium. Est ultricies integer quis auctor. Nunc faucibus a pellentesque sit amet porttitor eget dolor. Commodo sed egestas egestas fringilla phasellus faucibus scelerisque eleifend.
Leo a diam sollicitudin tempor id. Nunc mattis enim ut tellus elementum sagittis vitae et leo. Amet commodo nulla facilisi nullam vehicula ipsum a arcu. Scelerisque purus semper eget duis at tellus at. Lectus arcu bibendum at varius vel pharetra vel turpis. Turpis egestas pretium aenean pharetra magna ac placerat vestibulum lectus. Risus feugiat in ante metus dictum at tempor commodo ullamcorper. Fermentum odio eu feugiat pretium nibh ipsum consequat. Cursus sit amet dictum sit amet justo. Velit laoreet id donec ultrices. Porttitor massa id neque aliquam vestibulum morbi. Quam elementum pulvinar etiam non quam lacus suspendisse. Quam elementum pulvinar etiam non quam lacus suspendisse faucibus interdum. Id porta nibh venenatis cras sed felis. Nisl pretium fusce id velit. Enim blandit volutpat maecenas volutpat. Pharetra sit amet aliquam id diam. Sed enim ut sem viverra aliquet eget sit amet tellus. Aliquam sem fringilla ut morbi tincidunt augue. Sed cras ornare arcu dui vivamus arcu.
Background Background
Background Background
Background Background
Background Background
Background Background
Background Background
Background Background
Background Background
Background Background
Background Background
Background Background
Background Background
Background Background
Background Background
Background Background
Background Background
Background Background
Background Background
Background Background
Background Background
Foreground
Foreground
Foreground
Foreground
Foreground
Foreground
Foreground
Foreground
paralex full medium
Sample of opacity