Imagen de fondo para pack tienda  

 
Javier
 Javier
Estimable Member

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

Citar
Respondido : 11/02/2013 8:09 pm
Luis Mendez Alejo
 Luis Mendez Alejo
Miembro Admin

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

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar Testimonio
¡Gracias!.

ResponderCitar
Respondido : 11/02/2013 10:25 pm

Gestor de Contraseñas - VPN Conexión Segura - Gestor 2FA (Segundo Factor de Autenticación

Javier
 Javier
Estimable Member

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

ResponderCitar
Respondido : 11/02/2013 11:14 pm
Luis Mendez Alejo
 Luis Mendez Alejo
Miembro Admin

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

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar Testimonio
¡Gracias!.

ResponderCitar
Respondido : 11/02/2013 11:47 pm

wpdoctor-revisa-la-salud-de-tu-wordpress

Por favor Iniciar Sesión o Registro