Crear doble guarda, vía CSS

Enviado por clbustos el Vie, 04/03/2005 - 02:07.
Clasificado en:

A mi viejo amigo Christian le preguntó una alumna si se podía establecer una doble guarda como fondo de pantalla: una vertical, la otra horizontal. Algo como esto:

La opción más primitiva es crear una GIGANTESCA imagen que cubra todo el fondo, pero es fácil darse cuenta que o se repetirá hacia abajo, lo cual hará que aparezca la barra superior al bajar la pantalla, o si lo dejamos sin repetición, se acabará el fondo al bajar por el texto. También malo.
Mi solución (una de las tantas), es

  1. Poner el fondo vertical como fondo(background) del elemento body
  2. La guarda vertical es un div en posición absoluta, con ancho al 100% y con z-indez a 1
  3. El contenido como un div en posición relativa y z-index superior a 1. Es necesario posicionar el div del contenido (con relative o absolute), ya que en static (la opción por defecto), el z-index no funciona y la guarda superior taparía el texto.


Si quieren ver como funciona, es cosa que bajen el archivo adjunto y lo revisen. Son un par de kilitos, no más, así que no hay mucho lío.

AdjuntoTamaño
doble_guarda.zip4.67 KB

Enviar un comentario nuevo

El contenido de este campo se mantiene como privado y no se muestra públicamente.
If you have a Gravatar account, used to display your avatar.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Saltos automáticos de líneas y de párrafos.

Más información sobre opciones de formato