CSS-only fullscreen background image slideshow. Different image transitions and also make a title appear using CSS animations.

Demo

Download Css Background Slider

Documentation

admin_panelHave a few options for correct choice module positions
If you're using a Artisteer template:
These templates use a relative positioned main container. In order to display the Css Backgroun 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 Css Background Slider correctly, you should comment out the background: property in the ID #art-main in your template.css file.

Create a optimal module position:

Unfortunately, due to the vast number of templates for Joomla, this question cannot be answered universally. So the best method for optimal results is to create a own (optimal) module position. This tutorial will show you how to achieve this with in less than 3 minutes.
This tutorial assumes that your website is already online and you're accessing it with a FTP client. Step 1:
Login to your webspace with FTP and change to your template folder ( /templates/*YourTemplate*/ ). In this tutorial, we will be creating (as an example) a additional module position in joomla 2.5's beez2 template, however, this method works for all versions of Joomla and for all templates.
You can now see the content of your template folder. The two files that need to be edited are marked in the picture below.

Background module joomla positionStep 2:
Now edit with a UTF8 aware text editor (NOT word or wordpad) the file 'templateDetails.xml' (depending on your FTP client and editor, you need to download the file first to your local computer and upload it again after editing).
Look for the section <positions> , this section defines all available module positions of your template. Now create a additional module position by ading the line <position>*Positionname*<position> as shown in the picture (we chose the module position name extrobgs for this example, you can of course use your own module position name). Save the file and upload it again to your webspace.

Background module joomla positionStep 3:
Next, edit the file index.php the same way like in step 2.
Look for the <body> Tag and add a div element immediately after it (see picture below). Within the opening and closing div tag, add the Joomla Tag <jdoc:include type="modules" name="*Positionname*" /> (replace *Positionname* with your the name you chose). This Tag will display the actual module content, in this case, it will display the Css Background Slider. Save your file and upload it back to your webspace.

Background module joomla positionStep 4:
As last step, go to the backend of your Joomla site and publish the  CSS Background Slider in the module position you just created. Now, you will see the background slideshow in your sites frontend.

Your cart

Your cart is empty

Copyright © 2009-2018. All Rights Reserved.