Use FlexSlider for Fullscreen BG Images?

[andy_emm]

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!

[TommyBickerdike]

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;
}

[TommyBickerdike]

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

[Author]

Posts