Background-image en hotmail

cristian_cena · #1 (**permalink**) 28/11/2009, 22:13

Hola a todos!

Quiero enviar un e-mail desde hotmail.
Todo va bien, el e-mail es enviado reconociendo etiquetas html y estilos css

Solo que la propiedad background-image no es reconocida, no se muestra la imagen de fondo.

Para ello prové con:

1 - Adjuntar la imagen al e-mail e incluir la ruta en los estilos "background-image:imagen.jpg;"

2 - Incluir la url en vez de la ruta a una imagen que se encuentra ya subida a un servidor "background-image:url(http:// ... .jpg);"

En ambos casos, hotmail, sigue sin reconocer la propiedad "background-image"

Desde ya muchas gracias!

EDITO:

incluyo el código:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Que te parecio el taller</title>
</head>

<body>
<div style=" width:630px; background-image: url(http://s2.wordpress.com/wp-content/themes/pub/albeo/images/bkg-body.jpg); font-family:'Trebuchet MS'; background-repeat:no-repeat; padding:16px;">
<h1 style="font-size:23px;">¿Que te parecio el taller de diseño que acabas de cursar?</h1>
<h2 style="font-size:13px; font-style:italic;">Expresate: solo cruzando nuestras experiencias y opiniones podremos mejorar la calidad del taller. </h2>
<p style="font-size:14px; padding-left:16px;">
¿El contenido fue bueno? <br>
¿Que opinas de la metodología
utilizada? <br>
¿La orientación del taller te ha sido útil para insertarte
en el ámbito laboral? <br>
¿Que le falto al taller?<br>
¿Cuales fueron los puntos positivos?<br>
&nbsp;Etc, etc.<br>
</p>
<span style="font-size:12px;">
Esta iniciativa es nuestra, de los estudiantes, tratándose de un blog NO OFICIAL destinado a crear un canal de comunicación que nos hacía falta, en el que podamos hablar sin presiones, con libertad.<br>
<br>
El blog está "improvisado" asi que toda idea es aceptada, mandala a través de un comentario con tu e-mail.<br>
<br>
Por último, expresémosnos preferentemente con un lenguaje profesional, eso nos va a ayudar a conseguir el respeto que buscamos. No utilizemos insultos, recuerden que el blog es moderado y ese tipo de mensajes no se subirán ya que la idea es construir sin ofender a nadie.<br></span>
<br>
<span style="background-color:#FFFFFF; padding:16px; float:right;">Opinar te hace libre, hazlo <a href="http://misitio.com/">aquí</a></span>
<div style="clear:both;"></div>
</div>
</body>
</html>

mayid · #2 (**permalink**) 29/11/2009, 11:28

Cita:

2 - Incluir la url en vez de la ruta a una imagen que se encuentra ya subida a un servidor "background-image:url(http:// ... .jpg);"

Esto seria lo correcto.

Yo tuve problema con background-image, asi que siempre uso background en su reemplazo. Sugiero pruebes condensar todas las propiedades en background:

Cita:

div style=" width:630px; background-image: url(http://s2.wordpress.com/wp-content/t...bkg-body.jpg); font-family:'Trebuchet MS'; background-repeat:no-repeat; padding:16px;">

Cita:

div style=" width:630px; background: url(http://s2.wordpress.com/wp-content/t...s/bkg-body.jpg) no-repeat; font-family:'Trebuchet MS'; padding:16px;">

Y veas si funciona mejor.

cristian_cena · #3 (**permalink**) 29/11/2009, 13:09

Gracias mayid,

Intenté haciendo lo que dices, pero el e-mail sigue sin mostrar el fondo.

Luego se me ocurrió trabajar de el siguiente modo con z-index (evitando utilizar la propiedad background).

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>&iquest;Que te parecio el taller?</title>
</head>

<body>

<div style="position:absolute; left:0; top:0; z-index:1;">
<img src="http://s2.wordpress.com/wp-content/themes/pub/albeo/images/bkg-body.jpg" width="662px"/>
</div>

<div style="position:absolute; left:16px; top:0px; z-index:2; width:630px; font-family:'Trebuchet MS'; background-repeat:no-repeat; padding:16px;">
<h1 style="font-size:23px;">¿Que te parecio el taller de diseño que acabas de cursar?</h1>
<h2 style="font-size:13px; color: #000000; font-style:italic;">Expresate: solo cruzando nuestras experiencias y opiniones podremos mejorar la calidad del taller. </h2>
<p style="font-size:14px; padding-left:16px;">
¿El contenido fue bueno? <br>
¿Que opinas de la metodología
utilizada? <br>
¿La orientación del taller te ha sido útil para insertarte
en el ámbito laboral? <br>
¿Que le falto al taller?<br>
¿Cuales fueron los puntos positivos?<br>
&nbsp;Etc, etc.<br>
</p>
<span style="font-size:12px;">
Esta iniciativa es nuestra, de los estudiantes, tratándose de un blog NO OFICIAL destinado a crear un canal de comunicación que nos hacía falta, en el que podamos hablar sin presiones, con libertad.<br>
<br>
El blog está "improvisado" asi que toda idea es aceptada, mandala a través de un comentario con tu e-mail.<br>
<br>
Por último, expresémosnos preferentemente con un lenguaje profesional, eso nos va a ayudar a conseguir el respeto que buscamos. No utilizemos insultos, recuerden que el blog es moderado y ese tipo de mensajes no se subirán ya que la idea es construir sin ofender a nadie.<br></span>
<br>
<span style="background-color:#FFFFFF; padding:16px; float:right;">Opinar te hace libre, hazlo <a href="http://queteparecioeltaller.wordpress.com/" title="queteparecioeltaller.wordpress.com">aquí</a></span>
<div style="clear:both;"></div>
</div>
</body>
</html>

Posteriormente entro a hotmail, creo un nuevo mensaje y adjunto el archivo ".html" y ya veo un avance: La imágen es mostrada (pero no de fondo sino en su propia línea).
Como si se tratase de una burla veo que tampoco hotmail está soportando la propiedad z-index, o tal vez el posicionamiento absoluto.

Desde ya gracias por su respuesta.

P/D: No quiero duplicar el tema, por lo que si algún moderador considera que debe ser desplazado al foro de css, se lo agradecería.