not able to set background to full section

not able to set background to full section

I have created a section using HTML5 + jquery. i set a image as background
to that section, but image is not setting to full section.It leaves some
2px space at all 4 sides inside the section. My code is;
<div id="container" data-role="page">
<div style="..." data-role="header"><h>HOME</h></div>
<section id="mainsection">
</section>
</div>
CSS:
#mainsection
{
height:40px;
width:40%;
margin-left:5%;
margin-top:5%;
float:left;
background: url("images/pic99.png") no-repeat;
background-size : cover;
background-color:red;
}
I have used background-size property in % too,which is also not working.
And i'm using jquery-1.10.2.js, jquery.mobile-1.3.2.js,
jquery.mobile-1.3.2.min.css. Background-color property is setting exactly
to 100% & only i have this problem when using image in background
property.