I'm a newbie at Foundation and Interchange. I referred to the very limited documentation on background images at http://foundation.zurb.com/docs/components/interchange.html, but could not find anything to make it work for me. I believe I'm not doing anything wrong but no image appears on screen or even if it appears after I specify the height in 'pixels,' it just doesn't resize. It's so frustrating!
I want the background image on the website design to be responsive along with image options for 'Medium' and 'Small' screens. And possibly have a carousel that changes image automatically, but having a responsive background is the biggest challenge at this point so I don't know how I'll get there.
Also, there are 2 booking engines for the hotel site. I want that after you select let's say HOTEL-1, you should go to BOOKING ENGINE-1 after you click on BOOK NOW. Likewise, HOTEL-2 should go to BOOKING ENGINE-2 when BOOK NOW is clicked. At the same time it should send the data of CHECK-IN & NIGHTS to the respective booking engine.
Any expert help is greatly appreciated.
My design is: 
My code is:
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
<link rel="stylesheet" href="css/foundation.css" />
<link rel="stylesheet" href="css/octave-home.css" />
<script src="js/vendor/modernizr.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="row">
<div class="large-12 columns">
<div data-interchange="[images/img-1.jpg, (default)], [images/img-1.jpg, (large)], [images/img-1.jpg, (small)]" style="height:596px; width:100%"></div>
<div class="large-9 large-centered columns">
<div id="headerTop">
<div id="date">
<script type="text/javascript">
var d=new Date();
var weekday=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");
var monthname=new Array("January", "February", "March", "April",
"May", "June", "July", "August", "September",
"October", "November", "December");
document.write(monthname[d.getMonth()] + " ");
document.write(d.getDate() + ", ");
document.write(d.getFullYear() + " – ");
document.write(weekday[d.getDay()]);
</script>
</div>
<div id="number"><img src="images/phoneIcon.jpg" alt="Phone" width="13" height="17" align="left">+91 7676 555 222</div>
<div id="smiWrapper"><a href="http://www.facebook.com/OctaveHotels" target="_blank" onMouseOver="MM_swapImage('facebook','','images/f_o.jpg',1)" onMouseOut="MM_swapImgRestore()"><img src="images/f.jpg" alt="facebook" name="facebook" width="22" height="22" border="0"></a><a href="https://plus.google.com/117243465718548987723/about" target="_new" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('google+','','images/g+_o.jpg',1)"><img src="images/g+.jpg" alt="twitter" name="google+" width="24" height="22" border="0"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('linkedin','','images/in_o.jpg',1)"><img src="images/in.jpg" alt="linkedin" name="linkedin" width="23" height="22" border="0"></a></div>
</div>
</div>
</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.interchange.js"></script>
<!-- Other JS plugins can be included here -->
</body>
</html>
