Envío de Correo con imagen de fondo

Blasgo · #1 (**permalink**) 19/03/2019, 09:30

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.

ArturoGallegos · #2 (**permalink**) 19/03/2019, 09:34

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

Blasgo · #3 (**permalink**) 19/03/2019, 10:02

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í

ArturoGallegos · #4 (**permalink**) 19/03/2019, 12:18

- 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.header{width:100%; padding:50px 0;}

En la propia etiqueta HTML agregalo,

Código HTML:

Ver original<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.header h1{color:#fff; text-align:center;}

Utiliza

Código HTML:

Ver original<h1 style="color:#fff; text-align:center;">Seminario</h1>