Cómo agregar una imagen de fondo en WordPress

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

Video tutorial

Suscríbase a MundoCMS Si prefiere instrucciones escritas, siga leyendo.

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

Los temas de WordPress más populares vienen con soporte de fondo personalizado. Esta función le permite configurar fácilmente una imagen de fondo en su sitio de WordPress. Si su tema admite 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 esta función o no le gusta la forma en que implementa las imágenes de fondo, puede probar las otras opciones mencionadas en nuestro tutorial. Primero debe visitar el Apariencia »Personalizar página en su administrador de WordPress. Esto iniciará el personalizador de temas de WordPress donde puede cambiar varias configuraciones de tema mientras muestra una vista previa en vivo de su sitio web.

Luego 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 de selección de imágenes para continuar. Esto abrirá la ventana emergente de carga de medios de WordPress donde puede cargar una imagen desde su computadora. También puede seleccionar una imagen cargada previamente de la biblioteca de medios.

Luego, 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 de descarga 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 para la imagen de fondo. En "Preajuste" puede seleccionar cómo desea que se muestre la imagen de fondo: pantalla de relleno, ajuste de pantalla, repetición o personalizada. También puede seleccionar la posición de la imagen de fondo haciendo clic en las flechas a continuación. 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 guardar su configuración. Eso es todo, ha agregado con éxito una imagen de fondo a su sitio de WordPress. Visite su sitio web para verlo en acción.

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

Este método es mucho más flexible. Funciona con cualquier tema de WordPress y le permite configurar múltiples 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. Reproduce automáticamente todas sus imágenes de fondo en pantalla completa y compatible con dispositivos móviles. Esto significa que su imagen de fondo cambiará de tamaño automáticamente en dispositivos más pequeños. En primer lugar, 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 »Imagen BG en pantalla completa para configurar los ajustes del complemento.

Se le pedirá que agregue su clave de licencia. Puede obtener esta información desde el correo electrónico que recibió después de comprar el complemento o desde su cuenta en el sitio web del complemento. Luego, 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. Continúe y haga clic en el botón `` Agregar nueva imagen '' en la página de configuración del complemento. Esto lo llevará a la pantalla de descarga 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 su pantalla. Entonces debe proporcionar un nombre para esta imagen. Este nombre se usará internamente, por lo que puede usar todo 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 general, o puede elegir entre diferentes secciones de su sitio web como categorías, archivos, página de inicio o blog. No olvide hacer clic en el botón Guardar imagen para guardar su imagen de fondo. Puede agregar tantas imágenes como desee visitando la Apariencia »Imagen BG en pantalla completa página. Si configura más de una imagen para su uso global, el complemento comenzará a mostrar automáticamente 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 comienza a aparecer una nueva imagen de fondo.

El tiempo que ingresa aquí es en milisegundos. Si desea que una imagen de fondo desaparezca después de 20 segundos, deberá ingresar 20000. Recuerde hacer clic en el botón Guardar configuración para guardar los cambios.

Imágenes de fondo para publicaciones, páginas y categorías

Full Screen Background Pro también le permite configurar imágenes de fondo para publicaciones, páginas, categorías, etiquetas, etc. Simplemente edite la publicación / página donde desea mostrar una imagen de fondo diferente. En la pantalla de edición del artículo, verá el nuevo cuadro `` Imagen de fondo de pantalla completa '' debajo del editor de publicaciones.

Para usar una imagen de fondo para una categoría específica, debe visitar la Apariencia »Imagen BG en pantalla completa luego haga clic en el botón "Agregar una nueva imagen". Después de cargar su imagen, puede seleccionar "Categoría" como el contexto en el que desea mostrar la imagen de fondo.

Ahora ingrese el ID de categoría específico o slug en el que desea mostrar la imagen. Consulte nuestra guía sobre cómo encontrar un ID de categoría en WordPress. Recuerde guardar su imagen para almacenar su configuración.

Método 3. Agrega imágenes de fondo usando CSS Hero

CSS Hero es un complemento de WordPress que le permite realizar cambios en su tema sin tocar una sola línea de código. Puede agregar imágenes de fondo rápidamente con solo unos simples pasos. En primer lugar, debe instalar y activar CSS Hero. Una vez que haya hecho eso, es hora de comenzar a personalizar su sitio web. Ahora abra su página de inicio en su navegador. Verá el enlace "Personalizar con CS SHero" en su barra de administración.

Después de hacer clic en este enlace, verá abiertas las opciones de CSS Hero. Pase el mouse sobre el área donde desea agregar una imagen. En la siguiente captura de pantalla, verá el área .header-filter-gradient. Al hacer clic en esta área, puede elegir el enlace de fondo en la barra lateral izquierda.

Se abrirá el enlace de fondo. Desde allí puede hacer clic en "Imagen". Ahora puede elegir una imagen de Unsplash o sus descargas para crear su fondo.

Cuando haga clic en la imagen deseada, verá el botón "Aplicar imagen". Entonces puedes elegir el tamaño de tu imagen. Hemos elegido la versión grande para que abarque toda la página. Haga clic en "Guardar y publicar" en la parte inferior, y la imagen de fondo ahora está guardada para su sitio.

Método 4. Agregue imágenes de fondo personalizadas en cualquier lugar de WordPress usando código CSS

De forma predeterminada, WordPress agrega varias clases de CSS a diferentes elementos HTML en su sitio de WordPress. Puede agregar fácilmente imágenes de fondo personalizadas a publicaciones 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, 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 CSS agrega WordPress a la etiqueta del cuerpo.

Puede usar la clase CSS category-tv o category-4 para darle un estilo diferente a esta página de categoría. 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 {imagen de fondo: 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: sin repetición; archivo adjunto de fondo: fijo; } Recuerde reemplazar la URL de la imagen de fondo y la clase de categoría con su propia categoría. También puede agregar fondos personalizados a publicaciones y páginas individuales. WordPress agrega una clase CSS con el ID de la publicación o la página en la etiqueta del cuerpo. Puede usar el mismo código CSS simplemente reemplazando .category-tv con la clase CSS específica de la publicación. Esperamos que este artículo le haya ayudado a aprender cómo agregar una imagen de fondo en WordPress. También puede consultar nuestra comparación de los mejores complementos de creación de páginas de arrastrar y soltar para WordPress, y nuestro tutorial sobre cómo crear un tema personalizado de WordPress (sin ningún código). Si le gustó este artículo, suscríbase a nuestro canal de YouTube para ver tutoriales en video de WordPress. También puede encontrarnos en Twitter y Facebook.