Cómo añadir una imagen de fondo en WordPress

¿Desea añadir una imagen de fondo a su sitio WordPress? Las imágenes de fondo se pueden utilizar para hacer que su sitio web parezca más atractivo y estéticamente agradable. En este artículo, le mostraremos cómo añadir fácilmente una imagen de fondo a su sitio de WordPress.

Video Tutorial

Suscribirse a AprenderWP

Si no te gusta el video o necesitas más instrucciones, entonces continúa leyendo.

Método 1. Agregar una imagen de fondo usando la configuración del tema de WordPress

La mayoría de los temas gratuitos y premium de WordPress vienen con soporte de fondo personalizado. Esta característica le permite establecer fácilmente una imagen de fondo para su sitio WordPress.

Si tu tema soporta la función de fondo personalizado, te recomendamos que utilices este método para añadir una imagen de fondo a tu sitio de WordPress. Sin embargo, si el tema no admite la función de fondo personalizado, puede utilizar otros métodos en este artículo.

Primero debe visitar la página Apariencia » Personalizar en su administrador de WordPress. Esto iniciará el personalizador de temas de WordPress, donde podrá cambiar diferentes configuraciones de temas mientras ve una vista previa en vivo de su sitio web.

A continuación, debe hacer clic en la opciónImagen de fondo. El panel se deslizará y le mostrará las opciones para subir o seleccionar una imagen de fondo para su sitio web.

Haga clic en el botón de selección de imagen para continuar.

Esto hará que aparezca la ventana emergente de carga de medios de WordPress, en la que puede cargar una imagen desde su ordenador. También puede seleccionar una imagen cargada previamente desde la biblioteca de medios.

A continuación, debe hacer clic en el botón Elegir imagen después de cargar o seleccionar la imagen que desea utilizar como fondo.

Esto cerrará la ventana emergente del cargador de medios y verá la vista previa de la imagen seleccionada en el personalizador de temas.

Debajo de la imagen también podrá ver las opciones de la imagen de fondo. En Preset, puede seleccionar cómo desea que se muestre la imagen de fondo: rellenar pantalla, ajustar pantalla, repetir o personalizar.

También puede seleccionar la posición de la imagen de fondo haciendo clic en las flechas de abajo. Al hacer clic en el centro, la imagen se alineará con el centro de la pantalla.

No olvides hacer clic en el botón «Guardar y publicar» en la parte superior para guardar tu configuración. Eso es todo, has añadido con éxito una imagen de fondo a tu sitio de WordPress.

Adelante, visite su sitio web para verlo en acción.

Método 2. Agregar imagen de fondo personalizada en WordPress usando el plugin

Este método es mucho más flexible. Funciona con cualquier tema de WordPress y le permite establecer múltiples imágenes de fondo. También puedes establecer diferentes fondos para cualquier mensaje, página, categoría o cualquier otra sección de tu sitio de WordPress.

Automáticamente hace que todas las imágenes de fondo sean a pantalla completa y que respondan a las necesidades del móvil. Esto significa que su imagen de fondo se redimensionará automáticamente en dispositivos más pequeños.

En primer lugar, debe instalar y activar el plugin Full Screen Background Pro. Para más detalles, vea nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Tras la activación, debe visitar la página Apariencia » Imagen BG a pantalla completa para configurar la configuración del plugin.

Se le pedirá que añada su clave de licencia. Puede obtener esta información del correo electrónico que recibió después de comprar el plugin o de su cuenta en el sitio web del plugin.

A continuación, debe hacer clic en el botón Guardar configuración para guardar los cambios. Ahora está listo para comenzar a agregar imágenes de fondo a su sitio de WordPress.

Sigue adelante y haz clic en el botón «Añadir nueva imagen» en la página de configuración del plugin. Esto le llevará a la pantalla de carga de imágenes de fondo.

Haga clic en el botón de elegir imagen para cargar o seleccionar una imagen. Tan pronto como seleccione la imagen, podrá ver una vista previa en vivo de la imagen en la pantalla.

A continuación, debe proporcionar un nombre para esta imagen. Este nombre será usado internamente, así que puedes usar cualquier cosa aquí.

Por último, debe seleccionar dónde desea que se utilice esta imagen como página de fondo. Full Screen Background Pro le permite establecer imágenes como fondo globalmente, o puede elegir entre diferentes secciones de su sitio web como categorías, archivos, página principal, página de blog, etc.

No olvide hacer clic en el botón de guardar imagen para guardar su imagen de fondo.

Puede añadir tantas imágenes como desee visitando la página Apariencia » Imagen BG a pantalla completa .

Si configura más de una imagen para ser usada globalmente, entonces el plugin comenzará automáticamente a mostrar las imágenes de fondo como una presentación de diapositivas.

Puede ajustar el tiempo que tarda una imagen en desvanecerse y el tiempo después del cual la nueva imagen de fondo comienza a desvanecerse.

El tiempo que usted entra aquí es en milisegundos. Si desea que una imagen de fondo se desvanezca después de 20 segundos, deberá introducir 20000.

No olvide hacer clic en el botón Guardar configuración para guardar los cambios.

Configuración de la imagen de fondo para mensajes, páginas, categorías, etc. individuales

Full Screen Background Pro también le permite establecer imágenes de fondo para mensajes individuales, páginas, categorías, etiquetas, etc.

Sólo tienes que editar el mensaje/página en la que quieres mostrar una imagen de fondo diferente. En la pantalla de edición de mensajes, verás la nueva casillaImagen de fondo a pantalla completa debajo del editor de mensajes.

Para utilizar una imagen de fondo para una categoría específica, debe visitar la página Apariencia » Imagen BG a pantalla completa y, a continuación, hacer clic en el botón `Añadir nueva imagen.

Después de subir su imagen, puede seleccionarCategoría como el contexto en el que desea mostrar la imagen de fondo.

Ahora ingrese el ID de la categoría específica o el slug donde desea que se muestre la imagen. Vea nuestra guía para encontrar el ID de la categoría en WordPress.

No olvide guardar su imagen para guardar su configuración.

Método 3. Añadir imágenes de fondo personalizadas en cualquier lugar de WordPress utilizando CSS

Por defecto, WordPress añade varias clases CSS a diferentes elementos HTML a través de su sitio WordPress. Puede añadir fácilmente imágenes de fondo personalizadas a mensajes individuales, categorías, autores y otras páginas utilizando estas clases CSS generadas por WordPress.

Por ejemplo, si tiene una categoría en su sitio web llamada TV, entonces WordPress añadirá automáticamente estas clases CSS a la etiqueta de cuerpo cuando alguien vea la página de la categoría TV.

1

Puede utilizar la herramienta de inspección para ver exactamente qué clases de CSS son añadidas por WordPress a la etiqueta de cuerpo.

Puede utilizar tanto la categoría-tv como la categoría-4 de la clase CSS para cambiar el estilo de esta página de categoría.

Añadamos una imagen de fondo personalizada a una página de archivo de categorías. Necesitará añadir este CSS personalizado a su tema.

1234567body.category-tv{ imagen de fondo: url(«http://example.com/wp-content/uploads/2017/03/your-background-image.jpg»); posición de fondo: centercentro; tamaño de fondo: cubierta; repetición de fondo: no repetición; adjunto de fondo: fijo;}

No olvide reemplazar la URL de la imagen de fondo y la clase de categoría con su propia categoría.

También puede añadir fondos personalizados a los mensajes y páginas individuales. WordPress añade una clase CSS con el ID del post o de la página en la etiqueta del cuerpo. Puedes usar el mismo código CSS, sólo tienes que reemplazar .category-tv con la clase CSS específica del puesto.

Esperamos que este artículo le haya ayudado a aprender a añadir una imagen de fondo en WordPress. También puedes ver nuestra lista de trucos muy útiles para el archivo de funciones de WordPress.

Si te ha gustado este artículo, suscríbete a nuestros tutoriales de vídeo de YouTube Channel for WordPress. También puede encontrarnos en Twitter y Facebook.

Deja un comentario