<style>
.page--appbcg__background {
//background-color: red;
background-image: url("https://videohive.img.customer.envatousercontent.com/files/241571641/bighd.jpg?auto=compress%2Cformat&fit=crop&crop=top&max-h=8000&max-w=590&s=eff7aca73a2933133204ac6800f993bf");
}

#bg1 {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%; 
background-image: url("https://videohive.img.customer.envatousercontent.com/files/241571641/bighd.jpg?auto=compress%2Cformat&fit=crop&crop=top&max-h=8000&max-w=590&s=eff7aca73a2933133204ac6800f993bf");
}

.bg {
background-image: url("https://videohive.img.customer.envatousercontent.com/files/241571641/bighd.jpg?auto=compress%2Cformat&fit=crop&crop=top&max-h=8000&max-w=590&s=eff7aca73a2933133204ac6800f993bf");
}


.page__background {
background-size: cover;
background-repeat: no-repeat;
margin-top: 0;
padding: 0;
text-align: center;
//background-color: #caaffe;
}

.extended_content {
position: absolute;
height: 85%;
width: 100%;
}
</style>


<ons-page id="myPage">
<ons-toolbar style="height: 120px;" id="MainToolbar">
	<div class="left" id="MainToolbar_leftDiv">
		<ons-toolbar-button id="bg1" style="color: #ffffff;"><ons-icon icon="fa-bars"></ons-icon></ons-toolbar-button>
	</div>
</ons-toolbar>

<ons-tabbar id="tabbar" swipeable>
    <ons-tab class="bg" id="tabButton1" page="page1" active><ons-icon style="color: white;" icon="fa-globe" size="1.5em"></ons-icon></ons-tab>
    <ons-tab class="bg" id="tabButton2" page="page2"><ons-icon style="color: white;" icon="fa-globe" size="1.5em"></ons-icon></ons-tab>
    <ons-tab class="bg" id="tabButton3" page="page3"><ons-icon style="color: white;" icon="fa-globe" size="1.5em"></ons-icon></ons-tab>
</ons-tabbar>
</ons-page>

<script>
ons.ready(function() {
var pullHook = document.getElementById('pull-hook');

pullHook.addEventListener('changestate', function(event) {
var message = '';

switch (event.state) {
case 'initial':
message = 'Pull to refresh';
break;
case 'preaction':
message = 'Release';
break;
case 'action':
message = 'Loading...';
break;
}

pullHook.innerHTML = message;
});

pullHook.onAction = function(done) {
setTimeout(done, 1000);
};
});
</script>

<template class="extended_content" id="page1">

  <ons-page>
<div style="height: 76px;"></div>
<ons-pull-hook id="pull-hook">
Pull to refresh
</ons-pull-hook>
    <b>TITLE 1</b>
<br>
CONTENT
<xojoscript>Hello World</xojoscript>
<br>
CONTENT

   </ons-page>
</template>

<template class="extended_content" id="page2">
<ons-page>
<div style="height: 76px;"></div>
<h2>TITLE 2</h2>

CONTENT

</ons-page>
</template>


<template class="extended_content" id="page3">
<ons-page>
<div style="height: 76px;"></div>
<h2>TITLE 3</h2>
<br>
CONTENT
<br>
CONTENT

</ons-page>
</template>




