How to resize background image dynamically using Jquery

<!

DOCTYPE html>

<

html>

<

head>

<

meta name = "viewport" content = "width = device-width, height = device-height" />

<

title>jQuery Mobile: Button Icon</title>

<

link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css" />

<

script src="http://code.jquery.com/jquery.min.js">

</

script>

<

script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js">

</

script>

<

script type="text/javascript">

function

set_body_height()

{

var wh = $(window).height();

// alert(wh);

$(

'body').attr('style', 'height:' + wh + 'px;');

}

$(document).ready(

function() {

set_body_height();

$(window).bind(

'resize', function() { set_body_height(); });

});

　

　

function

image_resize() {

$(

"the_pic").each(function () {

var maxWidth = 230;

var maxHeight = 230;

/*Used for aspect ratio*/

var ratio = 0;

/*Current image width*/

var width = $(this).width();

/*Current image height */

var height = $(this).height();

/*Check if the current width is larger than the max*/

if (width > maxWidth) {

/*get ratio for scaling image*/

ratio = (maxWidth / width);

/* Set New hieght and width of Image*/

$(

this).attr({

width : maxWidth,

height : (height * ratio),

alt :

"your-alt-text-you-can-remove-this"

});

/* Reset height to match scaled image */

height = (height * ratio);

/* Reset width to match scaled image */

width = (width * ratio);

/*Check if current height is larger than max*/

if (height > maxHeight) {

/*get ratio for scaling image*/

ratio = (maxHeight / height);

/*Set new height and width*/

$(

this).attr({

height : maxHeight,

width : (width * ratio),

alt :

"your-alt-text-you-can-remove-this"

});

}

}

});

}

/*

Here is End Image Resize Code

*/

/*

How can we call this Function

*/

/* Start $(document).ready function() */

$(document).ready(

function () {

/* Call Function For image Resize (Not for Webkit Browser) */

image_resize();

//alert("Function called");

});

/* End $(document).ready function( */

/* Call Function (for Webkit Browser like safari and Chrome) */

$(window).load(

function () {

image_resize();

alert(

"Function called");

});

</

script>

</

head>

<

body >

<

div data-role="page" id="home" style="background-image:url(mainImage.png);background-size:100% 100% ;">

<div data-role="header">

<a data-role="button" data-theme="none" data-corners="false" data-shadow="false" href="impressum.html" data-inline="true"><img src="btn_information.png"/></a>

<h1>

<font size=10>Militarpolzei</font>

</h1>

<a href="#secondPage" data-role="button" data-theme="none" data-corners="false" data-inline="true"><img src="btn_option.png" /></a>

</div>

<div data-role="content" style="padding-top:36%;">

<table width="100%" style="opacity:0.9;filter:alpha(opacity=150);background-image:url(transBlackPatch.png);background-size:100% 100%">

<tr>

<td width="35%" align="right">

<a href="impressum.html" data-role="button" data-inline="true" data-theme="none" data-corners="false" data-shadow="false"> <img id="the_pic" src="icon_ortung.png" width="60" height="60"/></a>

</td>

<td width="30%" align="center">

<a href="#map" data-role="button" data-inline="true" data-theme="none" data-corners="false" data-shadow="false"> <img id="the_pic" src="icon_notruf.png" width="120" height="120"/></a>

</td>

<td width="35%">

<a href="#map" data-role="button" data-inline="true" data-theme="none" data-corners="false" data-shadow="false"> <img id="the_pic" src="icon_light.png" width="60" height="60"/></a>

</td>

</tr>

</table>

</div>

</

div>

</

body>

</

html>