Saltar al contenido

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 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.

20201127 61

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 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 esta función, o si no le gusta cómo implementa las imágenes de fondo, puede probar las otras opciones mencionadas en nuestro tutorial.

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

20201127 62

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

20201127 63

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 de la biblioteca de medios.

20201127 64

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.

20201127 65

Debajo de la imagen, también podrá ver las opciones de la imagen de fondo. En “Preajuste”, puede seleccionar cómo desea que se muestre la imagen de fondo: pantalla completa, ajustar pantalla, repetir o personalizada.

También puede seleccionar la posición de la imagen de fondo haciendo clic en las flechas a continuación. Hacer clic en el centro alineará la imagen con el centro de la pantalla.

No olvide hacer clic en el botón “Guardar y publicar” en la parte superior para almacenar su configuración. Eso es todo, ha agregado con éxito una imagen de fondo a su sitio de WordPress.

Leer más  Cómo crear un formulario de contacto en WordPress (paso a paso)

Visite su sitio web para verlo en acción.

Método 2. Agregar 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.

Automáticamente hace que todas sus imágenes de fondo sean de pantalla completa y con capacidad de respuesta móvil. Esto significa que su imagen de fondo cambiará automáticamente de tamaño 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 »Imagen BG en pantalla completa para configurar los ajustes del complemento.

20201127 66

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 lo llevará a la pantalla de carga de la imagen de fondo.

20201127 67

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.

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 configurar imágenes como fondo global, o puede elegir entre diferentes secciones de su sitio web como categorías, archivos, portada o página de 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 página Apariencia »Imagen BG en pantalla completa .

Si configura más de una imagen para usar globalmente, el complemento comenzará a mostrar automáticamente imágenes de fondo como una presentación de diapositivas.

Leer más  22 mejores temas de WordPress para tiendas de ropa (2020)

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

20201127 68

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.

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 individuales, páginas, categorías, etiquetas y más.

Simplemente edite la publicación / página donde desea mostrar una imagen de fondo diferente. En la pantalla de edición de publicaciones, verá el nuevo cuadro ‘Imagen de fondo de pantalla completa’ debajo del editor de publicaciones.

20201127 69

Para usar una imagen de fondo para una categoría específica, debe visitar la página Apariencia »Imagen de fondo de pantalla completa y luego hacer 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.

20201127 70

Ahora ingrese el ID de categoría específico o slug donde desea mostrar la imagen. Consulte nuestra guía sobre cómo encontrar el ID de categoría en WordPress .

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

Método 3. Agregar 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 en unos sencillos pasos. Primero, debes 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 .

20201127 71

Después de hacer clic en ese enlace, verá que se abren las opciones de CSS Hero . Pase el mouse sobre el área a la que desea agregar una imagen.

En la captura de pantalla a continuación, verá .header-filter-gradient area. Al hacer clic en esta área, puede elegir el enlace de fondo en la barra lateral izquierda.

20201127 72

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

Leer más  Los 10 mejores temas de video gratuitos de WordPress para atraer al público
20201127 73

Cuando haga clic en la imagen que desea, verá el botón ‘Aplicar imagen’. Luego, puede elegir el tamaño que desea que tenga su imagen. Elegimos la versión grande para que se extendiera a lo largo de la página.

Haga clic en ‘Guardar y publicar’ en la parte inferior, y la imagen de fondo ahora se guarda para su sitio.

20201127 74

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 todo su sitio de WordPress. Puede agregar fácilmente imágenes de fondo personalizadas a publicaciones individuales, categorías, autor 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.

<body class = "categoría de archivo categoría-categoría de televisión-4">

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

20201127 75

Puede usar cualquiera de las clases category-tv o category-4 CSS para diseñar solo 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;
archivo 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 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 reemplace .category-tv con la clase CSS específica de la publicación.

Esperamos que este artículo le haya ayudado a aprender a agregar una imagen de fondo en WordPress. Es posible que también desee ver 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 tutoriales en video de WordPress. También puede encontrarnos en Twitter y Facebook .