Cómo agregar una imagen de fondo en WordPress

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

Video Tutorial

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

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

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

Si su tema es compatible con la función de fondo personalizado, le recomendamos que utilice este método para agregar una imagen de fondo a su sitio de WordPress. Sin embargo, si su tema no es compatible con la función de fondo personalizada, entonces puede usar otros métodos en este artículo.

Primero necesitas visitar el Apariencia »Personalizar Página en tu administrador de WordPress. Esto abrirá el personalizador de temas de WordPress donde puede 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ón 'Imagen de fondo'. El panel se deslizará y le mostrará las opciones para cargar o seleccionar una imagen de fondo para su sitio web.

Haga clic en el botón Seleccionar imagen para continuar..

Esto abrirá la ventana emergente del cargador de medios de WordPress donde puede cargar una imagen desde su computadora. 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 usar 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 el ajuste preestablecido, puede seleccionar cómo desea que se muestre la imagen de fondo: pantalla de relleno, pantalla de ajuste, repetición o personalizada.

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 olvide hacer clic en el botón 'Guardar y publicar' en la parte superior para almacenar sus configuraciones. Eso es todo, ha agregado exitosamente una imagen de fondo a su sitio de WordPress.

Continúa y visita tu sitio web para verlo en acción..

Método 2. Agregue una imagen de fondo personalizada en WordPress usando el complemento

Este método es mucho más flexible. Funciona con cualquier tema de WordPress y le permite configurar varias imágenes de fondo. También puede establecer diferentes fondos para cualquier publicación, página, categoría o cualquier otra sección de su sitio de WordPress.

Automáticamente hace que todas sus imágenes de fondo sean de pantalla completa y móviles. Esto significa que su imagen de fondo se redimensionará automáticamente en dispositivos más pequeños.

Primero, debe instalar y activar el complemento Full Screen Background Pro. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress.

Tras la activación, debe visitar Apariencia »Pantalla completa de la imagen de BG página para configurar los ajustes del plugin.

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

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

Continúe y haga clic en el botón 'Agregar nueva imagen' en la página de configuración del complemento. Esto te llevará a la pantalla de carga de la imagen de fondo..

Haga clic en el botón 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 se usará internamente, por lo que puede usar cualquier cosa aquí.

Finalmente, debe seleccionar dónde desea que se use 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, portada, página de blog, etc..

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

Puedes agregar tantas imágenes como quieras visitando Apariencia »Pantalla completa de la imagen de BG página.

Si configura más de una imagen para ser utilizada globalmente, entonces el complemento 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 desaparecer y el tiempo después del cual la nueva imagen de fondo comienza a aparecer..

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

No olvide hacer clic en el botón Guardar configuración para almacenar sus cambios..

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

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

Solo edita la publicación / página donde quieras mostrar una imagen de fondo diferente. En la pantalla de edición posterior, verá el nuevo cuadro 'Imagen de fondo de pantalla completa' debajo del editor de publicación.

Para utilizar una imagen de fondo para una categoría específica, debe visitar Apariencia »Pantalla completa de la imagen de BG página y luego haga clic en el botón 'Agregar nueva imagen'.

Después de cargar su imagen, puede seleccionar 'Categoría' como el contexto donde desea mostrar la imagen de fondo.

Ahora ingrese la ID de categoría específica o el slug en el que desea mostrar la imagen. Vea nuestra guía sobre cómo encontrar la identificación de categoría en WordPress.

No olvides guardar tu imagen para guardar tus configuraciones..

Método 3. Agregue imágenes de fondo personalizadas en cualquier lugar de WordPress usando CSS

De forma predeterminada, WordPress agrega varias clases de CSS a diferentes elementos HTML en todo el sitio de WordPress. Puede agregar fácilmente imágenes de fondo personalizadas a publicaciones individuales, categorías, autores y otras páginas usando estas clases de CSS generadas por WordPress.

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

Puede usar la herramienta de inspección para ver exactamente qué clases de CSS agrega WordPress a la etiqueta del cuerpo.

Puedes usar cualquiera categoria-tv o categoría-4 Clase CSS para el estilo de esta página de categoría de manera diferente.

Agreguemos una imagen de fondo personalizada a una página de archivo de categorías. Deberá agregar este CSS personalizado a su tema.

 body.category-tv background-image: url ("http://example.com/wp-content/uploads/2017/03/your-background-image.jpg"); posición de fondo: centro centro; 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 puedes agregar fondos personalizados a publicaciones y páginas individuales. WordPress agrega una clase CSS con la publicación o ID de página en la etiqueta del cuerpo. Puede usar el mismo código CSS, simplemente reemplace .category-tv con la clase CSS específica para publicación.

Esperamos que este artículo te haya ayudado a aprender cómo agregar una imagen de fondo en WordPress. También puede querer ver nuestra lista de trucos extremadamente útiles para el archivo de funciones de WordPress.

Si le ha gustado este artículo, suscríbase a nuestros tutoriales en video del Canal de YouTube para WordPress. También puedes encontrarnos en Twitter y Facebook..