CSS Background Image

Recomendaciones, uso y todos los parámetros de la propiedad CSS background-image. En esta web encontrarás de forma visual y clara la información necesaria para que puedas asignar cualquier imagen al fondo de un contenedor en HTML

Principales propiedades CSS para el background

Formas de imagen de fondo

La siguiente es una publicación invitada de Joseph Markus. Joseph tenía un diseño particular que necesitaba implementar para el sitio web Britain on Film de BFI. Como un verdadero desarrollador

Ver más »

⇾ ¿Que es la la propiedad de CSS background-image y que nos permite hacer?

La propiedad background image de CSS nos permite poner una imagen como fondo de cualquier tipo de contenedor html: table, div, body…

[css]div{ background-image: url(Carpeta-Imagenes/fondo.jpg); }[/css]

⇾ Recomendaciones para usar background-image de CSS

↳ formato de la URL

la url de la imagen de fondo puede ser absoluta o relativa, es decir, que podemos poner la ruta completa hacia la imagen (https://cssbackgroundimage.es/Carpeta-Imagenes/fondo.jpg) o la relativa (Carpeta-Imagenes/fondo.jpg).

Es aconsejable, siempre que podamos, usar la ruta relativa. Para ello aconsejamos crear en el directorio que almacena todos nuestros archivos css una carpeta que contenga todas las imágenes que vamos a usar. De este modo siempre tendremos nuestras imágenes a mano y bien ordenadas para poder llamarlas desde el código.

↳ Tamaño de las imágenes

Muchas veces se nos olvida optimizar bien las imágenes adaptándolas al tamaño del contenido en el cual se van a mostrar.

Supongamos que vamos a poner una imagen que cubra todo el cuerpo de la página. Necesitamos una imagen que tenga un ancho bastante grande para que pueda mostrarse con buena resolución y bien en la amplia gama de resoluciones que tienen los múltiples dispositivos que pueden mostrar nuestra web. Sin embargo, si tenemos que poner una imagen dentro de una tabla, el tamaño de esta imagen debería ser bastante más pequeño que en el caso anterior.

Con esto conseguimos que el peso de las imágenes de nuestra web no se dispare y cause un incremento en el tiempo de carga de la web que tanto afecta sobre todo en móviles. Adicionalmente podemos usar la herramienta Optimizilla que nos permitirá comprimir nuestras imágenes, reduciendo así su peso, antes de subirlas a nuestro servidor y mostrarlas en la web.

↳ Añadir color de fondo

Es aconsejable poner un color de fondo para, en caso de no poder mostrar la imagen o que esta no se muestre de forma correcta, que el fondo siempre cumpla con los parámetros de estilo que tenga nuestra web y se pueda leer con claridad el contenido que estamos editando.

Dos de las formas más habituales de hacerlo son:

1.- En una sola propiedad del código:

[css]div{background: url(Carpeta-Imagenes/fondo.jpg) #CCCCCC; }[/css]

2.- Usando dos propiedades de CSS diferentes:

[css]div{ background-image: url(Carpeta-Imagenes/fondo.jpg); background-color: #CCCCCC; }[/css]

↳ ¿Conoeces la propiedad !important?

En muchas ocasiones no estamos creando nuestro código desde 0 sino que estamos modificando algo que ya existe en un theme por ejemplo. Sucede a menudo cuando hacemos nuestras webs en wordpress o utilizamos plantillas prediseñadas que modificamos el contenido y…… nada! que no le da la gana de salir bien!

Esto es porque estamos modificando un código ya existente, y si al cargar la web precarga nuestro codigo pero luego carga otra hoja de estilo que contiene un código que modifica lo que hemos hecho, simplemente parecerá que no hemos hecho nada.

Para solucionar esta situación basta con añadir !important justo antes de ; que cierra la propiedad en cuestion. Siguiendo con los ejemplos del punto anterior:

1.- En una sola propiedad del código:

[css]div{background: url(Carpeta-Imagenes/fondo.jpg) #CCCCCC !important; }[/css]

2.- Usando dos propiedades de CSS diferentes:

[css]div{ background-image: url(Carpeta-Imagenes/fondo.jpg) !important; background-color: #CCCCCC !important; }[/css]

⇾ Principales propiedades y usos de background image

↳ css background image opacity

La propiedad css “opacity” aplicada a una imagen de fondo sirve para darle a esta una transparencia definida. 

Es muy útil cuando la imagen que vamos a poner de fondo tiene colores muy fuertes que dificultan la visualización del contenido que vamos a superponer sobre ella.

La aplicación de esta propiedad sobre una imagen de fondo (background-image) es algo compleja por lo que lo explicaremos con más detalle aqui.

[css]div{ opacity: 0.5; }[/css]

↳ css background image size

La propiedad size nos permite ajustar el tamaño de la imagen de fondo a nuestras necesidades. Sus propiedades son: auto, tamaño manual, porcentaje, cover,contain, initial e inherit.

Explicamos todas sus características en el siguiente enlace.

↳ css background image repeat

Cualquier imagen que pongamos de fondo puede ser repetida tanto horizontalmente como verticalmente. Para hacer esta operación es tan sencillo como añadir junto a la propiedad background-imagen otra nueva con nombre background-repeat.

Sus propiedades son: repeat, repeat-x, repeat-y, no-repeat, space, round, initial.

Te damos todos los detalles de esta propiedad aqui.

[css]div{ background-image: url(Carpeta-Imagenes/fondo.jpg); background-repeat: repeat; }[/css]
Ir arriba