I am facing an issue with resizing a 1920x1200 background image using jQuery Supersized. Whenever I resize the browser, there is a gap that appears vertically instead of filling up to compensate for the width constraint.
I have checked and copied the settings from another user who has a similar 1920x1200 image that resizes perfectly. But for some reason, it's not working for me. What could be the missing piece in my setup?
Let's start by looking at the CSS code below where the height/width are set to 100%:
* {
margin: 0;
padding: 0;
}
#supersized a {
background: none repeat scroll 0 0 #111;
height: 100%;
left: 0;
overflow: hidden;
position: absolute;
top: 0;
width: 100%;
z-index: -30;
}
#supersized a.activeslide {
z-index: -10;
}
And here is the JS code snippet I am using:
<link media="screen" type="text/css" href="css/master.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js" type="text/javascript"></script>
<script src="js/supersized.core.3.2.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(function($){
$.supersized({
//Functionality
slideshow : 0,
autoplay : 1,
start_slide : 1,
random : 0,
slide_interval : 6000,
transition : 1,
transition_speed : 500,
new_window : 1,
pause_hover : 0,
keyboard_nav : 0,
performance : 1,
image_protect : 1,
image_path : 'img/',
min_width : 0,
min_height : 0,
vertical_center : 1,
horizontal_center : 1,
fit_portrait : 1,
fit_landscape : 0,
navigation : 0,
thumbnail_navigation : 0,
slide_counter : 0,
slide_captions : 0,
slides : [ {image : 'example.com/image.png', title : 'Test'} ]
});
});
</script>