Background Image Switcher

This extension is a wrapper for the jQuery Background Image Switcher Plugin

Installation

The preferred way to install this extension is through composer.

Either run

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

or add

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

to the require section of your composer.json file.

Usage

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

<?php
    use raoul2000\widget\bgswitcher\BgSwitcher;

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

<div id="targetId" class="cover-bg" style="width:100%;height:250px;">
    <p>some text here ... </p>
</div>

Below is an example of a CSS style to apply to the target container :

.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.

If this plugin did not convinced you, have a look to the Backstretch Plugin

License

yii2-bgswitcher-widget is released under the BSD 3-Clause License. See the bundled LICENSE.md for details.