Responsive Background Slider manual en


The eXtro Responsive Background Slider extended (E.R.B.S.E.) is a CSS3-based Slider for your website background.

Install the module by clicking on extensions -> install , now choose the module zip file and upload it.

+ Click on extensions -> modules and open the background slider module to configure all settings.
+ If you want to use a patten image, make sure you don't use a JPG image for this, since JPG images don't support transparency.
+ The animation duration defines how long each image should be displayed. Together with the total number of images, it defines the total length of the animation before it restarts.
+ Zoom (in percent) defines the zoom factor for the images. The higher this value, the more the image will be zoomed into.
+ Tilt (in degrees) defines how far the image will be tilted at the end of the animation. Positive values will tilt the image clockwise, negative values counterclockwise.

+ Now choose the font for the caption. You can overwrite the font name by entering your favourite fonts name from the google font directory.
+ Select fontsize and fontcolor and choose one of the 4 different text animation effects.

The last step is to enter yout images for the slider (up to 6) and optionally a caption.

Save the module and take a look at it in the frontend.

You'll receive the best result if you use a module position with low HTML nesting for the background slider module. We also recommend using a template which allows to hide the content completely in order to have a fullscreen CSS background slider

Module eXtro-background slider css only

Please note: This module is based on CSS3. On some browsers (especially IE <= 9) that do not fully support CSS3, this module cannot display the Slider animation correctly.
Supported mobile devices: latest Android and latest ios based mobile devices.

If you're using a Artisteer template:
These templates use a relative positioned main container. In order to display the eXtro BGS correctly, you should create a special module position, please see our tutorial how to create it.
Additionally, you should chech the container with the ID #art-main for a background image or background color. To display the eXtro Background Slider correctly, you should comment out the background: property in the ID #art-main in your template.css file.