Caja CSS para meter contenido

En este documento veremos una manera de hacer una caja con CSS para meter contenidos. La caja tendrá un diseño especial que enmarque los contenidos que metamos dentro. El ejemplo es fácilmente adaptable a otras situaciones y además tiene la ventaja de que al variar el tamaño de la ventana la caja y todos los contenidos se reescalan para adaptarse al nuevo tamaño.

Supongamos que tenemos una imagen que queremos que enmarque el contenido de nuestra página. Por ejemplo, supongamos que tenemos la siguiente imagen (la imagen aparece a su tamaño real):

Queremos que esta imagen enmarque el contenido de nuestra página. Dicho de otra manera, queremos que el texto esté escrito encima de este gráfico. Si probamos a poner este gráfico como fondo comprobamos que no podemos modificar su tamaño: podemos ponerlo una vez o repetirlo como un mosaico, o en vertical o en horizontal, pero no cambiar el tamaño.

La solución que emplearemos será similar a la usada en el caso de las sombras de texto: usar dos capas y escribir una sobre otra. Veamos en detalle cómo:

En primer lugar definiremos una clase fondo con el siguiente código:

      #fondo {
  position: fixed;
  margin: 0px;
  border: 0px;
  padding: 0px;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
}

Es decir, tendrá un posicionamiento de tipo fijo, ocupará el 100% del contenedor (que será toda la pantalla) y no tendrá márgenes ni bordes ni relleno y se colocará en la esquina superior izquierda (left: 0px; top: 0px;). La propiedad z-index vale 0. En caso de producirse desbordamiento, éste no se mostrará (overflow: hidden;).

A continuación incluiremos el código para las imágenes que estén dentro de esta capa:

    #fondo img {
            width: 100%; height:100%;
            }

Con esto le indicamos que las imágenes de esta capa ocupen toda la pantalla.

A continuación definiremos otra capa llamada cuerpo con posicionamiento absoluto y que empiece a contar a partir del punto que nos interese y ocupe la parte de pantalla que nos interese:

       #cuerpo {
  position: absolute;
  left: 5%;
  top: 12%;
  width: 90%;
  height:80%;
  z-index: 10;
overflow:auto;}

Lo importante es el posicionamiento absoluto y el valor del z-index que hace que esta capa esté sobre la otra, el valor de los otros parámetros podemos adaptarlo a cada caso.

Para terminar, en el body del documento incluiremos lo siguiente:

       <div id="fondo">
    <img src="perga.gif" alt="fondo" />
</div>


<div id="cuerpo">
    Aquí iría el texto del documento.
</div>

Con lo cual tendríamos dos capas superpuestas, una con la imagen al tamaño deseado y la otra con el texto.

El problema que tiene el ejemplo anterior es que no funciona correctamente en Explorer. Esto es básicamente porque Explorer asigna determinados valores de margen a algunos elementos y porque las indicaciones de tamaño las entiende de la caja incluyendo los márgenes, bordes y relleno (en contra de lo que dicen las especificaciones). Esto puede solucionarse incluyendo a continuación del cierre de la etiqueta style lo siguiente:

  </style><!--[if IE]> <style type="text/css"> body {
  margin: 0px;
  overflow: hidden;
}

#cuerpo {
  left: 0%;
  top: 0%;
  padding-left:5%;
  padding-right:5%;
  margin-top:7%;
  width: 90%;
  height:70%;
  overflow: auto;
} </style> <![endif]-->

Todo lo anterior será considerado un comentario para el resto de navegadores, pero Explorer lo interpreta como reglas de estilo. Los valores de los parámetros ha habido que ir probando hasta ajustarlos a un comportamiento parecido al deseado.

Pulsa para ver el ejemplo en funcionamiento.

Este mismo truco puede usarse par incluir una caja con bordes redondeados, usando la imagen de fondo adecuada. Si se quiere que la imagen y su contenido formen parte del cuerpo de la página, tan sólo habría que adaptar este ejemplo de modo que las dos capas fueran como en el ejemplo de texto sombreado.