Avisos
Vaciar todo
B. Tardes. estoy intentando cambiar y añadir una imagen fija de fondo a la plantilla winter. El efecto que se quirere buscar es que sobresalga esta imagen por los laterale de la parte del body, y llegue a ocupar todo el ancho de la resolución de cada pantalla. He logrado cambiar la imagen y trabajándola con Photoshop obtenemos aproximadamente el resultado que buscamos, pero relantiza la carga de la web, y por otro lado para cada resolución de monitor, queda a una altura vertical determinada ( efecto no deseado).
La pregunta es cómo inserto una imagen de fondo fija, a una altura determinda desde el margen superior (fija para todos los navegadores) y que repita a la ancho ( es decir verticalmente) todo el ancho de la página, para cada resolución de monitor.
Gracias
Un saludo
Adjunto unas iimágenes que describen merjor el efecto
www.nubukbd,com
URL del sitio: Contenido solo visible a usuarios registrados
Respondido : 11/02/2013 8:09 pm
Hola Javier,
Ese tipo de fondo, cuando no se trata de un color fijo (hexadecimal) ni de un patrón (pattern) te ves obligado a crear imágenes de fondo muy grandes, lo normal es que tengan un ancho de 1900 pixel por un algo de 600 u 800 pixel ya que posiblemente en monitores de 17" lo veas bien pero en móviles solo se vea una porción y en monitores de iMac de 27" se vea blanco por la derecha.
Es un tema complicado y requiere tener muy claro si realmente merece la pena sobrecargar la página con una imagen de 2 o más MB y con ello retardar la carga de la misma o si no queda otro remedio, si puedes usar patrones en lugar de una única imagen de fondo.
Saludos
Respondido : 11/02/2013 10:25 pm
B. Noches.....ya he dado con ello....y la verdad es que aunque coincido con lo que me comentabas.....estéticamente es lo que me pide el cliente. He cortado la imagen y he definido la regla para que la repita horizontalmente. Por otro lado he combinado posición de la imagen en porcentaje ( para que la centre horizontalmente) y en pixeles para que mantenga la misma medida verticalmente,....por último le he pedido que ocupe el 100% del ancho de la pantalla....
El efecto es muy similar al que buscaban originalmente..... ahí pego el código
Un saludo
body#ot-body{
/*background: url("../images/body-bg.png") repeat scroll 0 0 transparent;*/
background: url("../images/body-bg2.png") repeat-x scroll 50% 300px #52403e;
width:100%;
color: #666666;
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 12px;
}
www.nubukbd.com
Respondido : 11/02/2013 11:14 pm
Hola Javier,
Te ha quedado ¡¡genial! y en un iMac de 27" se ve completa y sin cortes.
Al final es un poco la base del "patrón" pero con tiras de imágenes verticales en tu caso.
Gracias por compartirlo. 😉
Saludos
Respondido : 11/02/2013 11:47 pm
