En esta entrada, vamos a ver algo simple sobre como poner un logo detrás de un texto y como centralizarlo.
Lo primero que vamos a realizar será añadir este código:
dentro del inicio del body, usaremos este método para simplificar, bien, quedaría de esta forma:
Expliquemos un poco de que se trata este código:
El text-align:center; se encargará de centralizar el logotipo en conjunto con el texto.
El background:url('url-logo') como ya sabemos generará la imagen.
como verán hasta ahora todo queda distorsionado, pues debemos nivelar todo, para eso utilizamos el 50% y el 40%, Eso permitirá centralizar el logotipo, pero esperen, el texto aun no esta alineado, entonces añadimos un Div que contenga un padding-top de 30%:
Juntando esos elementos obtendríamos un código como:
[Descargar ejemplo Tutorial ##download##]
Lo primero que vamos a realizar será añadir este código:
[style="text-align:center;background:url('url-logo') 50% 40% no-repeat;height:90%;"]
dentro del inicio del body, usaremos este método para simplificar, bien, quedaría de esta forma:
[<body style="text-align:center;background:url('logo.png') 50% 40% no-repeat;height:90%;">]
Expliquemos un poco de que se trata este código:
El text-align:center; se encargará de centralizar el logotipo en conjunto con el texto.
El background:url('url-logo') como ya sabemos generará la imagen.
como verán hasta ahora todo queda distorsionado, pues debemos nivelar todo, para eso utilizamos el 50% y el 40%, Eso permitirá centralizar el logotipo, pero esperen, el texto aun no esta alineado, entonces añadimos un Div que contenga un padding-top de 30%:
[<div style="padding-top:30%;"> Aqui el texto. </div>]
Juntando esos elementos obtendríamos un código como:
[<body style="text-align:center;background:url('logo.png') 50% 40% no-repeat;height:90%;"> <div style="padding-top:30%;"> Aqui el texto. </div>]
[Descargar ejemplo Tutorial ##download##]
