Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
  • #29288

    Following this topic:

    Since the latest update (2.1) the problem above is replaced by a new one. Instead of having the background image leave whitespaces on both sides, the background is now stretched to fullwidth without the height staying in proportion.

    I’ve checked the Enfold v7 homepage demo and noticed it does stay in proportion there. So I deleted all of my custom CSS, but the issue remains.

    My background image has the dimensions 1920 × 1491, while the enfold demo is a portrait format. Could that be a reason?

    The site is


    Please help


    Pretty please?


    Hi DavyE :)

    As i see this post was tagged for Kriesi’s personal queue. In the meantime you can try adding a proportional slider image




    Thanks for letting me know. The site is not live yet, so I’ll wait for feedback from Kriesi. I won’t add another slider as it’s only an IE8.

    And the fact that it seems to work well in the Enfold demo site, it proves that it should work. Just need to find the cause and fix, so hopefully Kriesi can point it out.



    Please add this on your custom.css or Quick CSS:

    .avia-fullscreen-slider .avia-slideshow>ul>li {
    height: auto9;

    I’m not sure if this is going to fix it on IE8 but please try.




    This way the picture just doesn’t even seem to display in IE8. I get only a blank background.



    At least the code affect the slider, we are getting somewhere somehow. Please try this:

    .avia-fullscreen-slider .avia-slideshow>ul>li {
    min-height: 100%9;
    max-height: 100%9;




    Unfortunately your new code hasn’t changed anything. I’ve added it to the bottom of the custom.css and even tried to add !important to make sure it doesn’t get overruled by anything, but nothing changes.


    Hi DavyE,

    Can you try re-creating that color section from scratch. Save in between each step and see if re-generating the whole css/html for the content helps.




    Still the same. Tried it on different pages and with different images as well, same problem.

    It’s really important that I can fix this ASAP. The site goes live next week and still have much work to do with these sliders on multiple pages. :(


    Oh, and by the way, love your new site (though I’m not so fond of the dark color outside the boxed site).

    I do wonder how you managed to add 2 overlay buttons ons portfolio items (demo and details). It’s not something that comes with the Enfold theme, is it?


    FYI: I just tried it on a completely new Wp install with a new db and ftp and no plugins installed.



    Have you tried resizing the background image to let’s say 1500x500px? The demo images usually have that dimension for Color Sections.



    Ok so I’ve tried resizing the image to be within your suggested dimensions of 1500 x 500 px. I’ve resized the image to be 1000 x 500 and it is not stretched, great! Thanks for the suggestion!

    But, now my question is if I can change something in the code somewhere in order to accept larger sizes so the image isn’t that blurry on bigger screen sizes. I’ve set the image in the slider to “No scaling”, but it doesn’t change anything, so must be in the code itself then.

    I’d like to keep the 1920 width.


    Hey! I have played around yet another 5 hours and I think this is almost unsolvable. the effort we put combined into this issue is no longer worth it.

    The slider has all the proper ie8 fallbacks for full cover background images applied. crazy stuff like ms filters and filter that should fix the issues and does that on other themes we use just fine. but for a strange reason I cant get it to work here.

    ie8 somehow messes the whole thing up no matter what and at this point I have no idea what is causing the issue. I even deleted all non related css and the problem still persists. so at this point I think its safe to say that the fullscreen slider cant work 100% IE8 with this theme. It will either distort the images or only align it centered without stretching it, even if the vieport is bigger than the image. I think I will re-set the slider to the second non-distorting behavior since at least a user can upload a big image and circumvent the distortion problem. its probably also save to say that not many IE8 users have a screen resolution of more than 1500px so they will never encounter the problem.

    Sorry for that, I almost never give up on any issue but I have wasted so many hours now on this that I simply want to throw my windows machine out of the window -_-


    Hi Kriesi.

    I had no idea it was such a difficult issue. My apologies for causing you frustrations and I really appreciate your effort and time to try to solve this. Now that I know it’s either too difficult to fix or just impossible I can say the same when others ask me why it’s not perfect on their machine.

    So thank you very much, I’ll just make due with what the theme offers and adapt to that. Just one question now that you mention “I think I will reset the slider”, do you mean that you’ll switch back to the previous slider in the next theme update? I’d like to know so I can add the necessary CSS back to disable the image repeating on IE8.


    Hey! I will switch back, but the image repeating will be disabled of course. so on ie 8 you will simply see a centered version of the image and if the image is smaller than the viewport there will be whitespace around it. So when uploading a big image of about 1500px x 1500px its pretty save to say that 90% of those ie8 user will never see the difference. and since the remaining 10% of ie8 users are not even a full percent of all visitors I think for now its a good tradeoff :)

    Going to close this thread now. If I happen to find out anything new I will repopen here so you might want to stay subscribed for a month or two :)

Viewing 18 posts - 1 through 18 (of 18 total)
  • The topic ‘Fullscreen easy slider in IE8 background out of proportion’ is closed to new replies.