Estilo CSS background-color
background-color nos ayuda a determinar el color de fondo de un determinado estilo. Por ejemplo, en el siguiente código podrás comprobar como le hemos puesto al fondo del estilo un color rojo.
<div style="background-color:#FF0000;">Este texto irá sobre fondo rojo</div>
Y el resultado lo podemos ver visualmente a continuación:
Este texto irá sobre fondo rojo
Estilo CSS background-image
Gracias a este estilo, en lugar de un color de fondo como hacíamos anteriormente, podemos aplicar una imagen de fondo. El código se escribe de la siguiente manera:
<div style="background-image:url(fondo.jpg)">Este texto irá sobre una imagen de fondo</div>
La url será el nombre de la imagen con su camino relativo o absoluto.
Estilo CSS background-repeat
Este atributo se usa para especificarle a la imagen que hemos usado de fondo si queremos o no que se repita y, en caso afirmativo, indicarle de qué modo queremos que se repita.
Si queremos que la imagen se repita en vertical y horizontal utilizaremos el atributo “repeat”, si queremos que la imagen se repita sólo en horizontal usaremos “repeat-x”.Y usaremos “repeat-y” para que se repita la imagen sólo en vertical. Si queremos que no se repita se lo indicaremos con “no-repeat”.
En el código siguiente veremos como a la imagen que hemos puesto de fondo en el estilo anterior, le hemos indicado que no se repita.
<div style="background-image:url(fondo.jpg); background-repeat: no-repeat;"> Este texto va sobre una imagen de fondo, no se repite.</div>
Estilo CSS background-position
Gracias a este estilo de background podemos fijar el punto de inicio para la imagen de fondo. Mediante este atributo podemos fijar el punto de inicio verticalmente (top, center y bottom) y horizontalmente (left, center y right). Si expresamos dos coordenadas, la primera será la horizontal y la segunda la vertical.
En el siguiente código verás cómo hemos seguido con el ejemplo anterior, pero esta vez fijando también el punto: a la izquierda y arriba.
<div style="background-image:url(fondo.jpg); background-repeat: no-repeat; background-position:left top;"> Este texto va sobre una imagen de fondo, no se repite y está fijado.</div>
Ahora podrás ver el ejemplo completo:
Este recurso es muy útil para darle estilo al texto y facilitar la lectura de, por ejemplo, tablas y comparativas. A continuación os mostramos una imagen de una tabla comparativa de los mejores antivirus gratis del 2017 en la que vemos como gracias al uso de colores diferentes de fondo, la lectura y la comprensión de la tabla es mucho más sencilla. Gracias a los colores es posible seguir de una forma muy intuitiva la información de cada una de las columnas sin necesidad de usar bordes internos en cada una de las celdas, algo que dificultaría su lectura.
Sin duda, el uso de los colores de fondo en una tabla es un recurso nada complicado de usar, como hemos visto, pero con unos resultados muy efectivos. ¡100% recomendable!
Muy bien explicado. Es una de esas cosas que los que no somos diseñadores hacemos muy de vez en cuando y se nos termina olvidando. Un saludo
El background-size tiene su utilidad, por ejemplo, el valor cover hace que cubra todo el espacio, útil en algunas ocasiones, pero tiene más alternativas que pueden ser de ayuda.
Me gustan las explicaciones, serán muy de utilidad para mis webs.