Grow your CSS skills. Land your dream job.

Use FlexSlider for Fullscreen BG Images?

  • # October 15, 2012 at 6:22 pm

    Hello All-

    I have been trying to use CSS to format the woothemes FlexSlider to scroll through fullscreen background images, similar to the Supersized! plugin ( http://www.buildinternet.com/project/supersized/ ). I would just use the Supersized! plugin, but I am looking for the functionality of the FlexSlider for use with tablets etc. I have tried giving the containing div a max-height and width of 100%, but no luck so far. Any suggestions?

    Thanks!

    # June 13, 2013 at 10:46 am

    body, html{
    height: 100%;
    padding: 0;
    margin: 0;
    }
    .flexslider{
    display: block;
    position: relative; //fixed or absolute may be needed
    height: 100%!important;
    overflow: hidden!important;
    width: 100%!important;
    }

    .flexslider .slides,
    .flexslider .slides li{
    width: 100%!important;
    height: 100%!important;
    }

    .flexslider .slides img{
    min-height: 100%;
    min-width: 100%;
    max-width: 10000%!important; //over ride any existing responsive image styling
    margin: 0 auto!important;
    }

    # June 13, 2013 at 11:54 am

    The issue is that the aspect ratio is not retained at small sizes.
    If you don’t mind some extra javascript, plugin this bit of jQuery:

    https://github.com/levymetal/jquery-resize-image-to-parent

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".