I have a image with dimension with dimensions 2350*180.
I am working on Phone gap. So,I need to give the code in a generic format so that it is applicable to any device.
Now, I have a background image for that big image.
style="background:url("img/bg.png") no-repeat fixed center top; width:100%; height:100%; "
this code works for few only.. Is there any mistake in my code?
another question, is when I scroll there is scroll bar thats visible. SO I added
style="overflow:hidden;"
<img src=""/> tag.
Am I correct or any other code should be added?
EDIT:
HTML
<body style="style="background:url("img/bg.png") no-repeat fixed center top; width:100%; height:100%;" class="body">
<div id="image" class="noSelect">
<table class="table">
<tr>
<td class="main">
<img src="http://www.rhpstudio.com/images/google_icon.png" alt="map" usemap="#map" style="overflow:hidden;" />
</td>
</tr>
</table>
</body>
I am taking about this background background:url("img/bg.png") in the code, and this image given here in is a sample one BUT its dimension is 2350*180.
EDIT:2-->entire code
HTML CODE:
<body style="background-image:url(img/bg.png);" class="body">
<div id="image" class="noSelect" style="height:100%;">
<table class="table">
<tr>
<td class="main">
<img src="img/list.png" alt="bloodtestmap" usemap="#bloodtestmap" class="noSelect" style="overflow:hidden;" />
</td>
</tr>
</table>
CSS CODE:
.body, .main_html
{
height: 100%;
margin: 0;
}
.body
{
overflow: hidden;
background-size: 100% 100%;
}
.table
{
width: 100%;
height: 100%;
text-align: center;
}
.main
{
max-width: 100%;
vertical-align: middle;
}