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
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
