Create a website preview with scrolling background

by Kjell | April 2nd, 2016 | Tutorials | 11 comments

I have received a couple of questions in regards to the scrolling theme previews.

If you like to implement this on your own website, follow these simple steps. You need a transparant .png file (monitor, ipad, etc) and a large full screen image.

1. Download (right click > save as) this large-monitor.png image and large theme preview (full screen) and upload both to your media library.

Desktop monitor

This scroll effect works fine on most large and small screens. Make sure your background image is large enough. The previews I’m using are 900px wide.

2. On the themes page I’ve added the code below to a simple “code” module.


Please right click > View image, to view the above code a bit larger. For one reason or another I cannot publish html code in this post, so to make it easier to follow I’m gonna add a download at the end of this post with the html & css included.

3. Wrap your large-monitor.png in a div with css class=”image-wrap” and add style=”background-image: url(‘http://large-preview-image-url’);”

If you want the preview image to link to another page just add < a href=”” > Desktop monitor image < / a >

4.Add this css to your Divi Options css panel .image-wrap { position: relative; background-color: transparent; background-position: 100% 20px; background-size: 100% auto; -webkit-transition: all 8s ease-out; -moz-transition: all 8s ease-out; -ms-transition: all 8s ease-out; -o-transition: all 8s ease-out; transition: all 8s ease-out; }

.image-wrap:hover { background-position: 100% 110%;}

.image-wrap img { margin-bottom: -10px !important;}

If you follow the above steps it should be easy to create this on your own website. Please download full sample html. The .zip contains html and 2 images.

I’m not a css expert myself, so if you think this above code can be improved please let me know in the comments. Have fun.

Desktop monitor

Instant access to ALL themes and support

Join now
Your message