¿Cómo colocar un fondo para una imagen grande centrada en el centro de la página?
Tengo una imagen con dimensiones con dimensiones.2350 * 180.
Estoy trabajando en la brecha del teléfono. Por lo tanto, necesito dar el código en un formato genérico para que sea aplicable a cualquier dispositivo.
Ahora, tengo una imagen de fondo para esa imagen grande.
style="background:url("img/bg.png") no-repeat fixed center top; width:100%; height:100%; "
este código funciona solo para unos pocos ... ¿Hay algún error en mi código?
otra pregunta, es cuando me desplazo hay barra de desplazamiento que es visible. Asi que agregué
style="overflow:hidden;"
<img src=""/> tag.
¿Estoy en lo correcto o se debe agregar algún otro código?
EDITAR:
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>
Estoy tomando sobre este fondofondo: url ("img / bg.png") en el código, y esta imagen dada aquí en es una muestra PERO su dimensión es2350 * 180.
EDITAR: 2 -> código completo
CÓDIGO HTML:
<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>
CÓDIGO CSS:
.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;
}