Background Image Switcher

This extension is a wrapper for the jQuery Background Image Switcher Plugin, _(*1)

Installation

The preferred way to install this extension is through composer., _(*2)

Either run, _(*3)

php composer.phar require --prefer-dist raoul2000/yii2-bgswitcher-widget "*"

or add, _(*4)

"raoul2000/yii2-bgswitcher-widget": "*"

to the require section of your composer.json file., _(*5)

Usage

Once the extension is installed, and assuming that our 3 images are stored in @webroot/images/background, simply use this code by :, _(*6)

 '#targetId',
        'pluginOptions' => [
            'images' => [
                'images/background/image1.jpg',
                'images/background/image2.jpg',
                'images/background/image3.jpg',
                'http://placehold.it/350x150'   // this image is remote
            ]
        ]
    ]);
?>




    some text here ... , _(*7)

Below is an example of a CSS style to apply to the target container :, _(*8)

.cover-bg {
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

For complete documentation please refer to the official BgSwitcher page. You may also have a look to the Github project page., _(*9)

If this plugin did not convinced you, have a look to the Backstretch Plugin, _(*10)