Background

Con el término background generalmente nos referimos al fondo de una página, aunque también podríamos estar hablando del fondo de un único elemento (por ejemplo un botón). En ambos casos podemos querer personalizar el fondo con un color de fondo o con una imagen de fondo, por ejemplo en formato JPG o PNG.

Ya sea por si tenemos un fichero PHP que renderice una página HTML o por que tenemos una página HTML directamente, el lenguaje que vamos a utilizar en ambos casos es CSS.

Fondo o background en CSS

El fondo o background es una propiedad CSS que nos permite establecer las características del fondo de un elemento HTML.

Cosas que habitualmente queremos hacer son:

– Especificar un color de fondo.

  • Color de fondo directamente.
  • Poner una imagen de fondo y utilizar un color de fondo para la zona sobrante.
  • Poner una imagen de fondo y utilizar un color de fondo para el momento mientras se está cargando la imagen o por si hubiera algún problema con la imagen y no se encontrase.

– Especificar una imagen de fondo.

  • Definir la ruta de la imagen.
  • Especificar la posición de la imagen.
  • Especificar si queremos que la imagen se repita a lo largo de todo el fondo.
  • Especificar si queremos que se desborde o no (comportamiento respecto al elemento).

Vamos a ver cada uno de estos casos a continuación.

¿Cómo modificar el color de fondo con la propiedad background en CSS?

Para modificar el color de fondo con la propiedad background en CSS utilizamos la propiedad background-color o la propiedad de atajo background directamente.

Es muy sencillo, por ejemplo utilicemos el código del color rojo (#FF0000) para poner el fondo de color rojo. Para ello vamos a definir la clase css “fondo-rojo”:

.fondo-rojo{

background: #FF0000;

}

.fondo-rojo{

background-color: #FF0000;

}

Y añadimos la clase al elemento html, por ejemplo a un div: <div class=”fondo-rojo”></div>

Otra opción es utilizar la propiedad style de html: <div style=”background-color: #FF0000;”></div>

¿Cómo establecer una imagen de fondo con la propiedad background en CSS?

Para modificar la imagen de fondo con la propiedad background en CSS utilizamos la propiedad background-image o la propiedad de atajo background directamente.

boton-rojo-css

Es muy sencillo, por ejemplo utilicemos una imagen (prueba.jpg) y vamos a ponerla como imagen de fondo. Para ello vamos a definir la clase css “fondo-con-imagen”:

.fondo-con-imagen{

background: url(‘prueba.jpg’);

}

.fondo-con-imagen{

background-image: url(‘prueba.jpg’);

}

Y añadimos la clase al elemento html, por ejemplo a un div: <div class=”fondo-con-imagen”></div>

Igual que en el caso anterior del color de fondo tenemos otra opción que es utilizar la propiedad style de html: <div style=”background-image: url(‘prueba.jpg’);”></div>

Mejores propiedades CSS para establecer un color de fondo

Si cómo buen desarrollador te preocupan las buenas prácticas a la hora de establecer el color de fondo o la imagen de fondo, te vamos a explicar los pros y contras de utilizar las propiedades background-color y background-image frente a la propiedad background.

Background-color

Viendo la imagen anterior quizás te surja una duda. Para establecer un color de fondo ¿en CSS es mejor utilizar la propiedad background o la propiedad background-color? Si tienes esta duda, la verdad es que da igual, lo que sea más habitual o sencillo de modificar para ti o el resto de personas del equipo.

Background-image

Y para establecer una imagen de fondo ¿en CSS es mejor utilizar la propiedad background o la propiedad background-image? Igual que en el caso anterior, la verdad es que da igual, lo que sea más habitual o sencillo de modificar para ti o el resto de personas del equipo.

Background-size

Esta propiedad se utiliza para especificar el tamaño de la imagen de fondo. Es especialmente util para hacer eficiente la carga de una página. Podemos subir al servidor una imagen más pequeña y mediante esta propiedad hacer que se amplie su tamaño al renderizar la página HTML.

Background-repeat

Podemos utilizar esta propiedad para especificar si la imagen de fondo queremos que se repita o si por el contrario queremos no se repita.

Especificar la posición de la imagen de fondo del background

Para especificar la ubicación de la imagen de fondo tenemos disponibles las cuatro propiedades restantes: background-position, background-origin, background-clip y background-attachment

Estas son las últimas propiedades disponibles en el background en css que nos quedan por ver. Se utilizan para establecer la posición del fondo respecto al elemento.

Imagen con fondo transparente

Para conseguir una imagen con fondo transparente es necesario que la propia imagen que queremos añadir ya tenga ese fondo transparente. Si tu imagen no lo tiene existen varias herramientas online (o también puedes eliminar el fondo transparente con photoshop o otro programa similar).

Una vez tengas la nueva imagen con el fondo transparente simplemente incluyelá en la clase CSS tal como hemos explicado antes y asegurate de eliminar el color de fondo si tampoco quieres que lo tenga. De esa forma el elemento cogerá el color de fondo del elemento que esté en una capa inferior.

Opacidad de una imagen de fondo

Con CSS es posible definir la opacidad de un elemento. Por ejemplo, si tenemos una imagen “prueba.jpg” integrada en el código HTML mediante el elemento: <img src=”prueba.jpg”/> podemos conseguir que tenga opacidad creando la siguiente clase:

.imagen-con-opacidad{
opacity: 0.5;
}

El valor 0.5 es la opacidad que queremos que tenga. El rango de valores que admite va desde el valor 0 (no visible) hasta el valor 1 (complementamente visible).

<img src=”prueba.jpg” class=”imagen-con-opacidad”/>

Fondo de color transparente o con opacidad

El fondo transparente no es una característica que se pueda conseguir con código CSS directamente. Lo que si que te permite el CSS es especificar la opacidad del fondo de un elemento (ya sea generando su opacidad tanto si tiene un color de fonod cómo si tiene una imagen de fondo).

.div-con-opacidad{
opacity: 0.5;
}

<div class=”div-con-opacidad” style=”height:20px;width:300px;”></div>

Fondo degradado

Para conseguir un fondo con un color que se vaya degradando o añadir gradientes podemos utilizar la función CSS linear-gradient combinada con la propiedad background-image.

.fondo-azul-degradado {
background-image: linear-gradient(to right, #0000FF , #FFFFFF);
}

<div class=”fondo-azul-degradado” style=”height:20px;width:300px;”></div>

De esta forma conseguiremos un resultado similar al siguiente:

Hosting

Te recomendamos...