Degradado de fondo con css

Hoy os traigo un post para explicar como conseguir un fondo degradado utilizando una imagen que repetiremos en el eje horizontal (x) utilizando css (repeat-x).

Para explicar el ejemplo voy a utilizar un degradado de azul a blanco, podéis usar la misma operatoria aplicando los colores que elijáis.

Bien, los pasos son muy sencillos, lo primero será crear una imagen con el degradado que vamos a usar, está imagen puede ser muy delgada, de unos 5 o 10 px de ancho es suficiente. Es más, la costumbre más extendida es hacer esta imagen tan delgada como 1px para que sea lo más pequeña posible y ahorrar tiempo de carga de la web, espacio y bandwidth. Yo he elegido una imagen de 16px de ancho. El alto debe ser el que se ajuste a tus necesidades, yo he hecho la imagen de 900px de alto. Esta imagen irá degradada desde el azul al blanco. Podéis hacer esta imagen fácilmente con photoshop o similar.

El segundo paso es crear un div en el que poner de fondo la imagen que hemos creado con el degradado y aplicarle la propiedad repeat-x en el estilo css. En el ejemplo que he creado y que podéis ver más abajo he puesto este div dentro de otro al que le he puesto el color blanco de fondo para que quede del mismo color que el final de mi degradado en caso de que la altura del contenido supere la altura de la imagen degradada. Nota estas dos cosas:

• La imagen aplicada al fondo será repetida en el eje horizontal mediante la propiedad css repeat-x.
• Hemos aplicado el color blanco al fondo del div contenedor para que si se supera la altura de la imagen el fondo quede del mismo color que el final del degradado.

El código css para la capa que contiene la imagen con el degradado de fondo sería similar a este:

#degradado {
  widht: 100%;
  min-height:900px;
  background: url(gradienteazul.jpg) repeat-x scroll 0;
  margin:0;
}

Descargar ejemplo degradado css

Estudia el código y verás como es relativamente fácil poner un degradado en el fondo de tu web creando un bonito efecto en el diseño que agrada durante la lectura del contenido.

Visita el ejemplo y estudia el código haciendo clic derecho y luego clic sobre ver código fuente.

Nuevo post sobre fondos degradados con css3 gradient, para hacer degradando de fondo con css sin uso de imágenes.