Poner header en CSS

Hace mucho tiempo pensé:

La gente usa PHP para paginas que no lo necesitan solo para poner cambiar fácilmente el diseño de la pagina mas rápido.

El problema era mas que todo por el header,ya que el fondo se podía cambiar la hoja de estilo CSS de la plantilla.

Así que pensé, porque no cambiar el header solo editando un solo archivo en vez editar todo los archivos HTML o php+css?

si tu header es solo una imagen y ya,esta es tu mejor opcion.
Además esta medida ayudaría a reducir el html a su verdadera mínima expresión.

Después de un buen rato pensando pensé, ya no ahí mas solución, que había perdido mi tiempo. Aunque, bueno podría simplemente no introducir una imagen y solamente dejar un fondo bonito que la remplace.

Esa fue la solucion.

Ya logre hacerlo y es muy simple,acá les explicare:

Primero que nada,usaremos una imagen,en mi caso es esta:

(es solo un ejemplo)

bueno ,procedamos, creamos un div y le damos la ID header ( o el que quieran )

Acá les dejo el código para que se guíen:

Código:

<html>
<head>
<title>header</title>
<link rel="stylesheet" href="(dirreccion de tu archivo css)" type="text/css">
</head>
<body>
<div id="header"><br>
</div>
</body>
</html>

ahora tenemos que poner la imagen como header (cabecera) a la pagina,ese es el problema,bueno en el archivo CSS ponemos el siguiente codigo:

Código:

#header {
  background-position:  center center;
  background-repeat: no-repeat;
  background-image: url(direccion);
  height: 188px;
}

explicare cada regla establecida en el código:

background-position: esto define las posición del fondo inicial del fondo.

nota: ahí 2 center porque el primero define como esta situado horizontalmente y el segundo verticalmente.

background-repeat: establece si se repetirá o no el fondo.

background-image: define la imagen que se usara de fondo

height: define el alto del div.

Nota:en este caso el mínimo de alto para el div debe ser el alto de la imagen que usaremos de header ( tambien llamado cabecera o banner).

Para personalizar el codigo para usarlo necesitas:

-cualquier editor web o editor de texto plano
-conocimientos básicos sobre la web
-conocimientos básicos de CSS


Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: