Foros del Web » Soporte técnico » Ayuda General »

Envío de Correo con imagen de fondo

Estas en el tema de Envío de Correo con imagen de fondo en el foro de Ayuda General en Foros del Web. Buen día amigos Espero puedan ayudarme, estoy creando una plantilla de correo todo bien, solo el problema es que cuando uso una imagen de fondo ...
  #1 (permalink)  
Antiguo 19/03/2019, 09:30
 
Fecha de Ingreso: abril-2010
Ubicación: Lima
Mensajes: 115
Antigüedad: 9 años
Puntos: 1
Envío de Correo con imagen de fondo

Buen día amigos
Espero puedan ayudarme, estoy creando una plantilla de correo todo bien, solo el problema es que cuando uso una imagen de fondo de ancho mayor a los 800px aparece la barra(scroll horizontal) de abajo, y el que recibe no le llega centrado el correo y tiene que mover el scroll.
Quisiera saber como puedo corregir eso para que al momento de pegar la plantilla en el correo pueda ajustarse al tamaño de cada correo la imagen de fondo.
Comentarles que la plantilla en versión web se visualiza y se adapta bien a cualquier navegador.

Gracias por su ayuda.
  #2 (permalink)  
Antiguo 19/03/2019, 09:34
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.337
Antigüedad: 11 años, 3 meses
Puntos: 1041
Respuesta: Envío de Correo con imagen de fondo

La imagen de fondo por lo regular no influye en el ancho o alto, muestra el código que implementas para ver que puede estar pasando
  #3 (permalink)  
Antiguo 19/03/2019, 10:02
 
Fecha de Ingreso: abril-2010
Ubicación: Lima
Mensajes: 115
Antigüedad: 9 años
Puntos: 1
Respuesta: Envío de Correo con imagen de fondo

Gracias por responder
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" />
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<title>Correo</title>
<style>
body{font-family:Helvetica,Arial,sans-serif; margin:0;}.clr{clear:both}.col12{width:100%}.col11{width:91.66666667%}.col10{width:83.33333333%}.col9{width:75%}.col8{width:66.66666667%}.col7{width:58.33333333%}.col6{width:50%}.col5{width:41.66666667%}.col4{width:33.33333333%}.col3{width:25%}.col2{width:16.66666667%}.col1{width:8.33333333%}.col12,.col11,.col10,.col9,.col8,.col7,.col6,.col5,.col4,.col3,.col2,.col1{position:relative;float:left;height:auto}
h1{font-size:28px; line-height: 1.3;}
.contenedor{position:relative;width:100%;max-width:640px;margin:auto;padding:0 15px;box-sizing:border-box;}
.header{width:100%; padding:50px 0;} .header .logo{}
.header h1{color:#fff; text-align:center;}
</style>
</head>

<body>
<div class="header" style="background-color:#000; background-image:url(https://mindculturalcenter.com/datos/banner-impuesto-renta.jpg); background-position:top; background-repeat:no-repeat;">
	<div class="contenedor">
        <div class="logo" style="width:400px; margin:0 auto;"><img src="https://mindculturalcenter.com/datos/logo-md-web-footer.png" /></div>
        <h1>Seminario<br />Impuesto a la Renta 2018: aspectos controvertidos en la determinación del resultado anual</h1>
    </div>
</div>
<div>
	<div class="contenedor">
    	<div>
        	<p>Otro Contenido textual</p>
        </div>
    </div>
</div>
<div class="footer">
	<div class="contenedor">
    	<p>Aqui pie</p>
    </div>
</div>
</body>
</html> 
EL enlace tbn dejo aquí
  #4 (permalink)  
Antiguo 19/03/2019, 12:18
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.337
Antigüedad: 11 años, 3 meses
Puntos: 1041
Respuesta: Envío de Correo con imagen de fondo

- Utiliza una plantilla que no contenga la estructura completa del HTML, solo debes incluir el contenido que tienes dentro del body

- Algunos clientes de correo no aceptan la incrustación de estilos con <style> o que los enlaces con <link>,
lo mas recomendado si no quieres tener problemas de compatibilidad es incluir todos los estilos en linea,

Es decir, en lugar de tener en un apartado <style>
Código CSS:
Ver original
  1. .header{width:100%; padding:50px 0;}
En la propia etiqueta HTML agregalo,
Código HTML:
Ver original
  1. <div class="header" style="width:100%; padding:50px 0;background-color:#000; background-image:url(https://mindculturalcenter.com/datos/banner-impuesto-renta.jpg); background-position:top; background-repeat:no-repeat;">

En lugar de
Código CSS:
Ver original
  1. .header h1{color:#fff; text-align:center;}
Utiliza
Código HTML:
Ver original
  1. <h1 style="color:#fff; text-align:center;">Seminario</h1>



La zona horaria es GMT -6. Ahora son las 01:51.