Docs

[Dadparvar]

Hi,

In layer slider, when we add a layer and choose image, we have option to set height and width for it. Even we can add custom css for it.

But we have no option to set background image’s height and width.

Any opinion on how to set size for BG image of slide will be appreciated.

Regards

[Jade]

Hi there,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[Dadparvar]

This reply has been marked as private.

[Lely]

Hi There,

On Layer Slider > Slider Settings > Appearance: after you have set the background image, on Custom slider CSS tab, please try to add this:

.ls-inner {
    width: 100% !important;
    background-size: cover;
} 

Hope this helps.

[Dadparvar]

Tested.

But not worked.

[Lely]

Hi There,

Sorry for the confusion. Above CSS will work if the image is set as background on Appearance Tab. See attached screenshot. On your case, it is set as slide image.
Please try this CS instead:

.ls-slide.ls-slide-1.ls-animating >img {
    width: 100% !important;
    margin-left: 0 !important;
    margin-top: -2px !important;
}

See second screenshot for the result of above CSS.
Hope this helps.

[Dadparvar]

1. I don’t see second screenshot in your reply
2. it didn’t work. (I don’t know if at all have that kind of css code in that field will work or not. I think we just can put css codes in that filed without setting class or id name)

See the first screenshot to see how Bg looks now. And see second one to see how it should look as we need.
http://uupload.ir/files/ibij_2016-05-18_11-47-19.png
http://uupload.ir/files/rxgh_2016-05-18_11-48-05.png

(first that the slider starts, it loads the layer image, that we set it to 100% in width and height and it looks ok, but then it fades and the BG image comes, and as you see it shows the image in original size and we have no option to set its height and width too looks like what we need)

[Christopher]

Hi there,

Please try this code:

.ls-slide.ls-slide-1.ls-animating >img {
    width: 100% !important;
    margin-left: 0 !important;
    margin-top: -2px !important;
    height: auto !important;
}

Hope it helps.

[Dadparvar]

Thanks

But not worked. When you login to my site, you can test it if you want.

[Lely]

Hi There,

Please remove it from Custom slider CSS of the Layer Slider.
I have added it on Appearance > Customize > Custom > Edit Global CSS. and it is now working. Check attached screenshot.

Always,
X

[Dadparvar]

Awesome.

Exactly what I wanted. Thanks

Just one more question: it seems for each slide I should add a similar code with changing the slide’s number. Do you have any code so that it sets that change to all other BG images in all sliders’s slide’s BGs?

Thanks

[Lely]

You’re welcome!

We can update the CSS to this to work on all slides images:

.ls-slide.ls-animating >img {
    width: 100% !important;
    margin-left: 0 !important;
    margin-top: -2px !important;
    height: auto !important;
}

Hope this helps

[Dadparvar]

It seems it has a little problem. First it seems to be worked, but as the slider is being completed, the image becomes as its original size again.
You can check the front-end to see how it acts.

[Lely]

Hi There,

Since this is a fixed CSS, the animation will check the original CSS of the image. I even tried to move the CSS on LayerSlider > CSS Editor. There’s a disconnection between the added CSS and the transition animation. Unfortunately, this will need more in depth changes when transition is set on the image which is outside the scope of our support. By default the image width will be it’s original size and not the 100%. Thank you for understanding.

[Author]

Posts