En este módulo se aglutinan todas las propiedades para configurar los colores e imágenes de fondo, así como los estilos de los bordes. Actualmente está en un nivel 3 y tiene una recomendación por el W3C desde octubre del 2017, por lo que está muy soportado por todos los navegadores.
¿Qué te vas a encontrar en esta entrada?
- background-color
- background-image
- background-size
- background-position
- background-repeat
- background-attachment
- background-origin
- background-clip
- background
En este artículo vas a ver todas la propiedades que se refieren a los colores e imágenes de fondo, en la próxima entrada verás los estilos de los bordes, ya que hay mucha ‘chicha‘.
Cada elemento que colocamos en nuestro documente HTML crea una caja imaginaria, la cual tiene las características del modelo de cajas que vimos en un pasado artículo. Esta caja tiene una capa de fondo que puede ser transparente (valor por defecto), de un color determinado y/o una o varias imágenes.
Tabla de contenidos
background-color
Esta propiedad cambia el color de fondo y es aplicable a cualquier elemento HTML.
La sintaxis es la siguiente:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Background-color</title>
<style>
h1 {
background-color: #eee;
padding: 40px;
border: 1px solid red;
}
</style>
</head>
<body>
<h1>Soy un encabezado H1</h1>
</body>
</html>
En este ejemplo pintamos el fondo de todas las etiquetas <h1> de un color gris claro. Como se puede ver, el fondo se pinta desde el border (en rojo).
background-image
Con esta propiedad se pueden poner más de una imagen de fondo en todos los elementos. La primera imagen declarada irá primero y las sucesivas se pondrán detrás según el orden en el código.
En el siguiente ejemplo, declaramos tres imágenes. La imagen persona.png estará en una capa superior, arboles.png le seguirá y prado.jpg estará al fondo del todo, en tercera posición.
div {
background-image: url ("persona.png"), url ("arboles.png"), url ("prado.jpg");
}
Los archivos de imagen se deben declarar con la palabra url y paréntesis y comillas. En este ejemplo, los archivos de imagen están al mismo nivel que el archivo .css. Si estuvieran en una carpeta inferior llamada img pondrías url ("img/persona.png"); y si estuviera en una carpeta superior pondrías url ("../img/persona.png");
Nota: Es importante que cuando se implementan imágenes de fondo, o aunque sólo se ponga una imagen, también se ponga un color de fondo que contraste con el texto (si hay), en caso que la imagen no este disponible por algún error.
div {
background-image: url ("image.png");
background-color: white;
}
background-size
Esta propiedad controla el tamaño de la imagen dentro del elemento. Los valores que pueden contener esta propiedad son los siguientes:
background-size: auto | <length-percentage> | cover | contain
div {
background-image: url ("image.png");
background-color: white;
background-size: 100%;
}
auto
Esta es la propiedad por defecto y su tamaño estará marcado por el tamaño original de la imagen
length-percentage
Esto no es una propiedad. Indica que el tamaño se puede indicar en medidas relativas o absolutas, como % rem o px. Decir que las medidas indicadas en % son relativas al elemento o contenedor de la imagen.
cover
Esta propiedad hace que la imagen cubra toda la superficie del elemento que la contiene. Hay que tener en cuenta que la imagen no pierde su proporcionalidad, por lo que aparecerá recortada. Si la imagen es más pequeña se estirará, perdiendo calidad (mapa de bits).
contain
Esta propiedad hace que la imagen se escale también sin perder su proporcionalidad, pero en este caso, se escalará hasta rellenar su lado más grande, por lo que siempre se verá la imagen completa. Si la imagen es más pequeña también perderá calidad (mapa de bits).
background-position
Con esta propiedad declaras la posición donde quieres que empiece la imagen. Sus valores a escoger son:
background-position: left | center | right | top | bottom | <length-percentage>
Tenemos un total de 9 posiciones combinando las palabras de la lista. Si declaramos la propiedad con una sola palabra, por ejemplo left, se interpreta que la quieres a la izquierda centrada. Es decir, sería lo declarar cualquiera de las dos declaraciones siguientes:
/* Declaraciones equivalentes */ background-position: left; background-position: left center;
Si queremos centrar la imagen podrás:
/* Declaraciones equivalentes */ background-position: center; background-position: center center;
Y si quieres ponerla a la derecha y abajo:
background-position: right bottom;
Si lo que quieres es afinar más la posición donde quieres que empiece tu imagen de fondo, entonces utilizas la combinación de palabras y px o %:
// A 50px de la izquierda y 50% verticalmente desde arriba background-position: left 50px top 50%;
background-repeat
Con esta propiedad indicas como se agrupan la imagen o imágenes de fondo una vez se les ha dado una medida y se han posicionado.
Tiene las siguientes opciones:
background-repeat: repeat-x | repeat-y | repeat | no-repeat | space | round
repeat-x
Repite la imagen horizontalmente hasta llenar el ancho de la caja, no se repite verticalmente. Se puede mostrar cortada alguna imagen.
repeat-y
Repite la imagen verticalmente hasta llenar el alto de la caja, no se repite horizontalmente. Se puede mostrar cortada alguna imagen.
repeat
Repite la imagen horizontal y verticalmente hasta llenar el ancho y alto de la caja. Alguna imagen puede mostrarse cortada. Esta es la propiedad selecciona por defecto.
no-repeat
No se repite en ninguna de las coordenadas.
space
La imagen se repite tanto como sea posible sin cortes de la imagen, se coloca una en cada extremo y después se reparte el espacio con unidades enteras.
round
La imagen se repite y se adapta (estirandose o aplastandose) para rellenar el espacio.
background-attachment
Esta propiedad especifica si la imagen esta fija o no respecto a su caja o elemento. Tiene tres valores:
background-attachment: scroll | fixed |
scroll
Este valor es el seleccionado por defecto. La imagen y su contenedor se desplazan de la misma forma
fixed
Con esta propiedad la imagen queda fija en el fondo y el contenido se mueve.
background-origin
Esta propiedad indica cual es el origen donde empezará a colocar la imagen, es decir, desde border o padding o content. Su valor por defecto es padding-box. Lo valores son los siguientes:
background-origin: padding-box | border-box | content-box
padding-box
Con este valor la imagen de fondo empezara a colocarse desde después del border o en el padding. Es decir, no estará sobre el borde.
border-box
Con el valor border-box la imagen empezará a situarse sobre el borde y se solapará
content-box
Con este valor en la propiedad blackground-origin, la imagen se colocara sobre el contenido propiamente, es decir, si el padding tiene 50px, la imagen empezará después de esos 50px.
background-clip
El background-clip tiene los mismo valores que background-origin, pero la diferencia entre uno y otro es que en bg-origin marca el inicio donde se colocará la imagen y bg-clip controla donde se empezara a ver la imagen, es decir, es como si tuvieras una plantilla que tapará el resto de la imagen.
Voy a tratar de ilustrarlo con unas imágenes:
/* Declaramos esto: */
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>background-origin / clip</title>
<style>
.container {
background-repeat: no-repeat;
background-image:url("bola.png");
background-position: left top;
background-origin: padding-top;
padding: 50px;
width: 100px;
height: 100px;
border: 10px solid red;
}
</style>
</head>
<body>
<div class="container">
</div>
</body>
</html>
Con lo que obtengo esto:
Si ahora añadimos una background-clip: content-box; lo que hacemos es como poner un visor que sólo deja ver el content así:
Aquí las dos imágenes solapadas:
background
Como hay muchas propiedades, si tuvieras que poner una línea por cada una de ellas, tu código se alargaría mucho. Por eso existe la propiedad abreviadas, con la que se declaran todas en una solo línea. Sólo hay que memorizar el orden de declaración que es el siguiente:
/* background: color image repeat attachment position; */
p {
background: #fff url("image.jpg") no-repeat left bottom;
}
Si alguna de las propiedades no se necesita, simplemente tienes que quitarla de la declaración. Por ejemplo, si sólo te interesa declarar la imagen de fondo y su posición:
p {
background: url("image.jpg") left bottom;
}
Si te ha gustado o te ha aclarado conceptos el contenido de este artículo compártelo en redes sociales para que pueda crecer, ¡Muchas gracias!
Deja una respuesta