{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 在下西门庆 的问题《how to position a background for a big image which》','https://www.manongdao.com/q-415931.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
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;
}
You can now set a background image to stretch to the edges of the container in various ways. If you don't mind the image distorting, you would do it like this:
Rather than this (which is broken)
try this in your style sheet: