Ir al contenido

Este post hace más de dos años que no se ha revisado, es posible que la información publicada sea obsoleta o las referéncias no existan.

Tres métodos de como colocar elementos (lineas, imágenes o contenido) a sangre. Mediante Css y Html.

Pongamos por caso que tenemos que colocar una línea, una imagen o un contenedor a sangre, tal que así:

Ejemplo de elemento a sangre

Veamos tres maneras de hacerlo:

  1. Imagen de fondo en el body
  2. Añadiendo un div a la estructura Html
  3. Mediante css con pseudoelementos

1. Imagen de fondo en <body>

Simple, colocamos una pequeña imágen de fondo repetida horizontalmente en el <body> mediante CSS.

body{ background:transparent url(imagenes/bg_body.png) repeat-x; } 

Lo soportan todos los navegadores y su implementación es muy simple. EL problema es que cuando hay que realizar cambios es más engorroso y la posición no se adapta al contenido si este crece verticalmente.

2. Utilizar un <div> entre elementos

Consiste en colocar un <div> en el html cuyo ancho sea en 100% de la ventana del navegador.

Este método es flexible, si la caja superior modifica el tamaño el <div> continuará estando debajo del elemento que ha aumentado de tamaño. Pero es una solución poco semántica, tenemos un contenedor en el html que no tiene ningún contenido, solo es un elemento gráfico. y en algunos casos  puede complicar bastante la estructura de la plantillas.

En vez de:

<div class="contenedor"> <div class="cabecera"></div> <div class="contenido"></div> <div class="pie"></div> </div> 

Sería:

<div class="contenedor"> <div class="cabecera"></div> <div class="contenido"></div> </div> <div class="asangre"></div> <div class="pie"> </div>

En este caso tanto el pie como el contenedor deberían compartir algunas características para conseguir centrar los contenedores, por ejemplo:

.contenedor, pie{ margin:0 auto; width:500px; } 

3. Pseudoelementos en body.

Leyendo en post en css-tricks Body border se me ocurrió que esa técnica también serviría para solventar esta cuestion

body:before{ background:#de9754; height:100px; content: ""; position: absolute; left: 0; right: 0; top:250px; z-index: 100; } 

Esta solución tiene la ventaja de poder colocar el elemento por encima o debajo del contenido con z-index. Tampoco se adapta al contenido, explorer 7 no lo soporta y explorer 8 no reconoce z-index

Demo

He montado una página con los tres métodos, en verde la versión con imagen de fondo en el body, en marrón la realizada con pseudoelementos y en rosa el div insertado en el html.

Demo Código