Cómo podemos colocar imágenes de patrones como fondos

Esta semana vamos a ver cómo podemos insertar imágenes de patrón como fondos dentro de nuestro WordPress. Este artículo es una continuación de nuestra serie sobre insertar imágenes en nuestro WordPress, de la que ya hemos visto

• Cómo impedir que se generen miniaturas
• Cómo poner una imagen de fondo a nuestra web
• También hemos visto cómo poner un vídeo
• Y por último: cómo añadir una imagen de fondo a cualquier sitio de nuestra web

Antes de nada tenemos que saber qué es un patrón, un patrón  o motivo no es ni más ni menos que una imagen que se repite horizontal y verticalmente hasta cubrir completamente una zona, ya sea como fondo de un objeto o contenedor. Una característica de los patrones es que no se nota ninguna quiebra o rotura entre las imágenes, por lo que da la sensación de que es una única imagen,

¿Porqué crear patrones con imágenes SVG en lugar de utilizar otro formato?

Se está extendiendo el uso de imágenes SVG, ya sea como patrones (como fondos) e incluso como formato de imagen para logotipos por ser un formato de imagen super comprimido, además de poder ser modificadas por programas de tratamiento vectorial, como por ejemplo Adobe Illustrator.

¿Dónde consigo patrones SVG gratuitos?

Existen varios sitios que nos ofrecen patrones de forma gratuita, entre ellos podemos nombrar:

• SVG Backgrounds
• All free downloads
• Hero Patterns
• SVGeez!
• SVG Patterns Gallery
• …

Utilizar un fondo SVG en imagen, de cualquiera de las páginas anteriores

Si elegimos la opción de descargar una imagen, la forma de colocarla como imagen de fondo en nuestro diseño, es muy sencilla. Tan solo tenemos que hacerlo como lo hubiéramos hecho si seguimos cualquier artículo que hemos mencionado al principio:

1. Lo primero que tenemos que hacer es subir esa imagen a nuestro WordPress, ya sabes que lo hacemos desde el apartado Medios.
2. A continuación nos situamos sobre el objeto (el contendedor) al que queremos aplicarle la imagen de fondo, y con el botón derecho elegimos la opción Inspeccionar, a continuación hacemos clic en el objeto al que le queremos aplicar este patrón: un div, un id, en el mismo body…
3. Una vez que tenemos el nombre del contenedor, nos vamos a Apariencia, Personalizar, y en el apartado CSS adicional escribimos el nombre de la etiqueta del contenedor y dentro ponemos la etiqueta background-image con la URL (la ruta) de la imagen que hemos subido anteriormente.

Por ejemplo: Como siempre, recuerda cambiar la URL de la ruta de mi imagen por la tuya 😉

Utilizar un fondo SVG de Hero Patterns

Lo primero que tenemos que hacer es elegir los colores, tanto el color de fondo como el color para la forma del patrón, además de elegir la opacidad para el patrón. A continuación tenemos que elegir el patrón que vamos a utilizar. Al elegir el patrón aparece un pop up donde nos dá dos opciones  para insertarlo en nuestra web:

1. Descargando el archivo SVG
2. Copiando el código y pegándolo en nuestra web.

Si elegimos la opción de descargar el archivo, tenemos que utilizar alguna de las opciones que hemos visto en anteriores artículos para poder insertarlo en nuestra web. Si elegimos la opción de copiar el código, podremos insertar este patrón de la siguiente forma:

1. Con el botón derecho y la opción Inspeccionar, elegimos el objeto al que le queremos aplicar este patrón: un div, un id, en el mismo body…
2. A continuación, y una vez que sabemos el nombre del objeto al que le vamos a aplicar el patrón, nos vamos a Apariencia, Personalizar, y en el apartado CSS adicional escribimos el nombre de la etiqueta del contenedor y dentro pegamos el código que hemos copiado anteriormente.

El resultado puede ser algo como esto: