Background Image?

[kavitama]

Hi,

Is there a way i can change the background image?
Or is there a way to have different background images?

Thx in advance!

[mickgeek]

Hi @kavitama!

You can change background image or something else through override CSS styles of the widget.

For example, in my application uses an AssetBundle with the site.css file. To change the background, I need to add the following code:

.da-slider {
    background-image: -webkit-linear-gradient(top, #fff, #fff8e7) !important;
    background-image: linear-gradient(to bottom, #fff, #fff8e7) !important;
}

Or (if I want the image):

.da-slider {
    background-image: url(../img/slider-bg.png) !important;
}

[kavitama]

That is fine for the moment but is there a chance I can associate an image to every

?
So I could combine the nice looking effects to an image ... >?

[mickgeek]

The widget does not provide such functionality directly. But you may to write own CSS styles like the following example.

<div class="da-slide">
    <div class="da-bg-1"></div>

    <h2>Opera</h2>
    <p>Opera is a web browser developed by Opera Software. The latest version currently runs on Microsoft Windows and OS X operating systems and uses the Blink layout engine.</p>
    <?= Html::a('Read more', '#', ['class' => 'da-link btn btn-default btn-lg']) ?>

    <div class="da-img">
        <?= Html::img('/img/1.png', ['alt' => 'Opera']) ?>
    </div>
</div>

.da-slide .da-bg-1 {
    position: absolute;
    left: 110%;
    width: 100%;
    height: 100%;
    opacity: 0;
    background: url(../img/slider-bg-1.png) center center;
    -webkit-background-size: cover;
    background-size: cover;
}
.da-slider-fb .da-slide .da-bg-1 {
    left: 0;
    opacity: 1;
}
.da-slide-current .da-bg-1 {
    left: 0;
    opacity: 1;
}
.da-slide-fromright .da-bg-1 {
    -webkit-animation: fromRightAnim5 0.4s ease-in 0.6s both;
    animation: fromRightAnim5 0.4s ease-in 0.6s both;
}
@-webkit-keyframes fromRightAnim5 {
    0% { left: 130%; opacity: 0; }
    100% { left: 0; opacity: 1; }
}
@keyframes fromRightAnim5 {
    0% { left: 130%; opacity: 0; }
    100% { left: 0; opacity: 1; }
}
.da-slide-fromleft .da-bg-1 {
    -webkit-animation: fromLeftAnim5 0.4s ease-in 0.4s both;
    animation: fromLeftAnim5 0.4s ease-in 0.4s both;
}
@-webkit-keyframes fromLeftAnim5 {
    0% { left: -150%; opacity: 0; }
    100% { left: 0; opacity: 1; }
}
@keyframes fromLeftAnim5 {
    0% { left: -150%; opacity: 0; }
    100% { left: 0; opacity: 1; }
}
.da-slide-toright .da-bg-1 {
    -webkit-animation: toRightAnim5 0.4s ease-in both;
    animation: toRightAnim5 0.4s ease-in both;
}
@-webkit-keyframes toRightAnim5 {
    0% { left: 0; opacity: 1; }
    100% { left: 100%; opacity: 0; }
}
@keyframes toRightAnim5 {
    0% { left: 0; opacity: 1; }
    100% { left: 100%; opacity: 0; }
}
.da-slide-toleft .da-bg-1 {
    -webkit-animation: toLeftAnim5 0.4s ease-in 0.4s both;
    animation: toLeftAnim5 0.4s ease-in 0.4s both;
}
@-webkit-keyframes toLeftAnim5 {
    0% { left: 0; opacity: 1; }
    100% { left: -150%; opacity: 0; }
}
@keyframes toLeftAnim5 {
    0% { left: 0; opacity: 1; }
    100% { left: -150%; opacity: 0; }
}