Create a Fullscreen Background Slider in WordPress

This is our second tutorial on the usage of Gutenslider. It covers how to create Fullscreen Background Sliders with the Gutenslider, the most awesome slider plugin for wordpress. Above all, it is possible to create full screen background sliders with the Pro and with the free version too.

Two Kinds of Fullscreen

When talking about full screen, what do we actually mean? Some people refer to it as 100% page height and width, other definitions would also include, that the background slider will always stay fixed in the background. Nonetheless, guess what, you can create both with Gutenslider 🙂 The following screenshot shows you the buttons to click and the sliders to slide to achive your two options.

The following slider displays a fullscreen (= 100% height and 100% width) image slider that is just like any regular page element and that will scroll with the pace of your website. Just set the Minimum Slider Height setting under Advanced Slider Settings to 100 and click the button on the top that says Full Width.

Example Tech slider image 1
Example Tech slider image 1
Example Tech slider image 3
Example Tech slider image 1
Example Tech slider image 1
Example Tech slider image 3

For a live example of a fixed fullscreen background slider, that will always stay in the page background and that is perfectly suited for displaying creative work, please refer to our examples section:

Of course you can still use all other features of Gutenslider on your fullscreen background sliders: adding any blocks you want on top, changing transition settings (Pro) or adding Video Slides (Pro).