Cómo añadir una imagen de fondo en WordPress (6 maneras fáciles)

¿Desea añadir una imagen de fondo a su sitio WordPress?

Las imágenes de fondo pueden hacer que su sitio web parezca más atractivo y vibrante.

En este artículo, le mostraremos cómo añadir fácilmente una imagen de fondo a su sitio WordPress.

¿Por qué añadir una imagen de fondo a WordPress?

Añadir una imagen a su sitio web en WordPress puede hacerlo más atractivo para los visitantes. Puede captar rápidamente la atención de los usuarios y hacer que participen en su contenido.

También le permite personalizar el diseño de su sitio web en función de su marca. Por ejemplo, puede subir fotos sutiles de sus productos o de la mascota de su marca en segundo plano.

Además, también puede añadir un vídeo de YouTube como fondo completo o una presentación de imágenes que darán vida a su contenido.

Sin embargo, le sugerimos que seleccione imágenes de fondo que no distraigan ni dificulten la lectura del contenido de su blog de WordPress. Un fondo debe mejorar la experiencia del usuario y ayudar a transmitir su mensaje a los visitantes.

También es importante elegir una imagen de fondo que sea compatible con dispositivos móviles y que no afecte a la velocidad de tu sitio web. De lo contrario, perjudicará el SEO de WordPress.

Dicho esto, vamos a ver diferentes maneras de añadir una imagen de fondo de WordPress. Cubriremos múltiples métodos, incluyendo el uso del personalizador de temas de WordPress, el editor completo del sitio, un plugin, el maquetador de temas y más.

Sólo tiene que hacer clic en uno de los enlaces siguientes para pasar a la sección que prefiera:

• Añadir una Imagen de Fondo Usando el Personalizador de Temas de WordPress
• Añadir una Imagen de Fondo Personalizada Usando el Editor de Sitio Completo
• Añadir Imagen de Fondo Usando el Maquetador de Temas de WordPress
• Añadir una Imagen de Fondo Personalizada en WordPress Usando un Plugins
• Añadir imágenes de fondo usando CSS Hero
• Añadir Imágenes de Fondo Personalizadas en Cualquier Parte de WordPress Usando Código CSS

Método 1. Añadir una imagen de fondo utilizando el personalizador de temas de WordPress

La mayoría de los temas populares de WordPress son compatibles con / dar soporte de fondo personalizado. Esta característica le permite establecer fácilmente una imagen de fondo, y le recomendamos este método si su tema es compatible con él.

Sin embargo, si falta la opción del menú Personalizador, es posible que el tema tenga activada la edición completa del sitio. En la siguiente sección, veremos cómo utilizar el editor de sitio completo para cambiar la imagen de fondo.

Para utilizar el Personalizador, debe visitar la página Apariencia ” Personalizar en el administrador de WordPress. Esto iniciará el Personalizador de temas de WordPress, donde puede cambiar diferentes ajustes del tema mientras ve una vista previa en vivo de su sitio web.

Una cosa importante a recordar es que las opciones que veas variarán en función del tema de WordPress que estés utilizando. Para este tutorial, estamos utilizando el tema Astra.

Si utiliza un tema diferente, puede que necesite consultar la documentación de ese tema o ponerse en contacto con el desarrollador del tema para averiguar cómo añadir una imagen de fondo si no la encuentra en el Personalizador.

En las opciones del Personalizador del tema Astra, tienes que hacer clic en “Global” en el panel de la izquierda.

Después, verás diferentes opciones globales para personalizar tu tema Astra.

Sigue adelante y haz clic en la sección “Colores”.

Aquí puede cambiar los colores del tema, incluido el color de fondo. También puedes personalizar los enlaces, el cuerpo del texto, los encabezados, los bordes y mucho más.

Para añadir una imagen de fondo, desplácese hasta la sección ‘Color de superficie’. A continuación, haga clic en la opción “Fondo del sitio” y cambie a la pestaña “Imagen”.

Después, basta con hacer clic en el botón “Seleccionar imagen de fondo”.

Esto abrirá la biblioteca de medios de WordPress, donde puede subir una imagen desde su ordenador o seleccionar una que haya subido anteriormente.

Una vez elegida la imagen de fondo, haz clic en el botón “Seleccionar”.

Esto cerrará la ventana emergente de medios, y verá una vista previa de su imagen de fondo seleccionada en el Personalizador de temas.

No olvides hacer clic en el botón “Publicar” de la parte superior para guardar tus ajustes.

Eso es todo. Ha añadido correctamente una imagen de fondo a su sitio WordPress. Visite su sitio web para verlo en acción.

Método 2. Añadir una Imagen de Fondo Personalizada Usando el Editor de Sitio Completo

Si utiliza un tema de WordPress basado en bloques, puede añadir una imagen de fondo personalizada utilizando el editor de sitio completo (FSE).

El editor de sitios completo le permite editar el diseño de su sitio web utilizando bloques. Es como editar una entrada de blog o una página utilizando el editor de bloques de WordPress.

Para este tutorial, utilizaremos el tema por defecto Twenty Twenty-Two. Para iniciar el editor completo del sitio, simplemente vaya a Apariencia ” Editor desde su escritorio de WordPress.

Una vez que estés en el editor completo del sitio, tendrás que añadir un bloque Portada a tu plantilla para subir una imagen de fondo.

Basta con hacer clic en el signo “+” de la parte superior y añadir un bloque de portada.

Haz clic en el botón “Subir” o “Biblioteca de medios” en el bloque Portada para añadir una imagen de fondo al bloque.

Esto abrirá el mensaje / ventana emergente del cargador de medios de WordPress.

Puede elegir una imagen que desee utilizar como fondo del sitio web.

Cuando haya elegido la imagen, sólo tiene que hacer clic en el botón “Seleccionar”.

Una vez añadida la imagen al bloque Portada, el siguiente paso es establecerla como fondo de la página.

Para ello, haga clic en el icono de vista de lista de la parte superior (icono con 3 guiones) para abrir una vista de esquema de los elementos del tema, como la cabecera y el pie de página del sitio.

Después, basta con arrastrar y soltar todos los elementos de la plantilla bajo el bloque Portada en la vista de lista.

Cuando estén todos debajo, la imagen del bloque Portada aparecerá como fondo del sitio.

Después, puede ajustar la imagen de fondo haciendo clic en el bloque Portada y seleccionando el icono del engranaje en la esquina superior derecha de la pantalla. Se abrirá el panel de ajustes del bloque.

Encontrará opciones para hacer de la imagen un fondo corregido, un fondo repetido, ajustar su superposición, editar el color y mucho más.

Cuando hayas terminado, no olvides hacer clic en el botón “Guardar”.

Ya está. Has añadido correctamente una imagen de fondo utilizando el editor de sitio completo.

Método 3. Añadir imagen de fondo usando el maquetador de temas de WordPress

Otra forma de añadir imágenes de fondo personalizadas a su sitio web es utilizar un maquetador de temas de WordPress como SeedProd.

Es el mejor plugin de WordPress para páginas de destino y maquetador de sitios web. Usted consigue arrastrar y soltar funcionalidad para personalizar fácilmente el diseño de su sitio web sin tocar una sola línea de código.

Para este tutorial, usaremos la versión SeedProd Pro porque incluye el maquetador de temas. También hay una versión SeedProd Lite que puedes probar gratis.

En primer lugar, tendrá que instalar y activar el plugin SeedProd. Si necesitas ayuda, consulta nuestra guía sobre cómo instalar un plugin de WordPress.

Una vez que el plugin esté activado, verá la pantalla de bienvenida de SeedProd en su escritorio de WordPress. A continuación, simplemente introduce tu clave de licencia y haz clic en el botón ‘Verificar clave’. Puedes encontrar la clave de licencia en tu área de cuenta SeedProd.

A continuación, tendrá que encabezado a SeedProd ” Theme Builder en su panel de administrador de WordPress.

Sigue adelante y haz clic en el botón “Temas” de la parte superior.

SeedProd ofrecerá ahora varias plantillas de temas entre las que elegir.

Puedes pasar el cursor sobre cualquier plantilla que quieras utilizar y hacer clic en ella. Vamos a utilizar la plantilla de tema ‘Starter’ para este tutorial.

A partir de aquí, SeedProd generará diferentes plantillas como la página de inicio, una sola entrada, una sola página, barra lateral, cabecera, etc.

Para añadir una imagen de fondo que aparezca en todo el sitio web y en todas las plantillas de temas, siga adelante y haga clic en la opción “Editar diseño” en CSS global.

En la pantalla siguiente, verás los ajustes globales de CSS que puedes cambiar.

Basta con hacer clic en la opción “Fondo”.

Después verás las opciones de Imagen de Fondo.

Siga adelante y haga clic en el botón “Usar su propia imagen” para subir su foto o haga clic en el botón “Usar una imagen de inventario” para buscar una imagen de inventario para usarla como fondo de su sitio web.

Una vez que haya añadido una imagen de fondo, el maquetador de SeedProd mostrará una vista previa en directo.

El plugin también ofrece opciones para cambiar la Posición de fondo. Puedes elegir si quieres usar la portada a pantalla completa, ponerla en repetición, etc.

Además, puedes modificar el grado de oscuridad de la imagen de fondo moviendo el carrusel / control deslizante “Oscurecer fondo”. Cuanto mayor sea la puntuación, más oscura será la imagen.

Cuando hayas terminado de editar la imagen de fondo, sólo tienes que hacer clic en el botón “Guardar” de la parte superior y cerrar los Ajustes globales de CSS.

Si desea añadir una imagen de fondo personalizada para diferentes partes de su sitio web, puede editar esas plantillas de temas individuales en SeedProd.

Para obtener más información, consulte nuestra guía sobre cómo crear fácilmente un tema de WordPress personalizado.

Método 4. Añadir una Imagen de Fondo Personalizada en WordPress Usando un Plugins

Usar un plugin de WordPress para añadir una imagen de fondo es mucho más flexible que las opciones integradas de WordPress.

Para empezar, necesitas instalar y activar el plugin Full Screen Background Pro. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Este plugin te permitirá establecer un fondo diferente para cualquier entrada, página, categoría y más. Además, se mostrarán automáticamente a pantalla completa y se ajustarán a los dispositivos móviles.

Una vez activado, debe visitar Apariencia ” Imagen BG a pantalla completa para establecer los ajustes del plugin.

Se te pedirá que añadas tu clave de licencia. Puede obtener esta información del correo electrónico que recibió tras comprar el plugin o de su cuenta en el sitio web del plugin.

A continuación, debe hacer clic en el botón “Guardar opciones” para activar su clave. Ya está listo para empezar a añadir imágenes de fondo a su sitio WordPress.

Haz clic en el botón “Añadir nueva imagen” de la página de ajustes del plugin.

Ahora debería ver la pantalla de subida de imágenes en segundo plano.

Haga clic en el botón “Elegir imagen” para subir o seleccionar una imagen. En cuanto selecciones la imagen, podrás ver una vista previa en directo de la imagen en tu pantalla.

A continuación, debe dar un nombre a la imagen. Este nombre es sólo para ti, así que puedes escribir cualquier cosa aquí. Por último, debe seleccionar dónde desea utilizarla como página de fondo.

Una vez que haya elegido si será el fondo para todo el sitio, para entradas, categorías, archivos o cualquier otro lugar, no olvide guardar los cambios.

Puedes añadir tantas imágenes como quieras a las diferentes áreas de tu sitio visitando la página Apariencia ” Imagen BG a pantalla completa y repitiendo este proceso.

Si establece que se utilice más de una imagen de forma global o para entradas, páginas y categorías, el plugin empezará a mostrar automáticamente imágenes de fondo a modo de pase de diapositivas.

Puedes ajustar el tiempo que tarda una imagen en desaparecer y el tiempo tras el cual una nueva imagen de fondo comienza a desaparecer en los ajustes del plugin.

El tiempo que introduzca aquí es en milisegundos. 1 segundo son 1000 milisegundos. Si desea que una imagen de fondo se desvanezca después de 20 segundos, entonces tendrá que introducir 20000.

No olvides hacer clic en el botón “Guardar opciones” para guardar los cambios.

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

Full Screen Background Pro también le permite establecer imágenes de fondo para entradas individuales, páginas, categorías, etiquetas y mucho más.

Sólo tienes que editar la entrada/página en la que deseas mostrar una imagen de fondo diferente. En la pantalla de edición de entradas, verás el nuevo cuadro “Imagen de fondo a pantalla completa” debajo del editor de entradas.

Para utilizar una imagen de fondo para las categorías, entradas y páginas, 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 seleccionar una categoría, entradas, páginas, archivos y otras opciones en el menú desplegable “Elegir el contexto en el que mostrar esta imagen”.

Supongamos que desea mostrar una imagen de fondo para las páginas de categorías. Para ello, basta con seleccionar “Categoría” en el menú desplegable.

El plugin también ofrece una opción para restringir la imagen de fondo a categorías, entradas y páginas específicas.

Por ejemplo, si desea añadir una imagen de fondo personalizada para categorías específicas, sólo tiene que introducir los nombres de las categorías en el campo “Seleccionar las categorías a las que restringir las imágenes”.

No olvides guardar tu imagen para almacenar tus ajustes.

Ha añadido correctamente una imagen de fondo para entradas, páginas y categorías específicas.

Método 5. Añadir imágenes de fondo usando CSS Hero

CSS Hero es un plugin para WordPress que le permite realizar cualquier cambio en su tema sin tocar una sola línea de código.

Puedes añadir imágenes de fondo rápidamente en unos sencillos pasos. Primero, necesitas instalar y activar CSS Hero. Para más detalles, consulta nuestra guía sobre cómo instalar un plugin de WordPress.

Una vez hecho esto, es hora de empezar a personalizar tu sitio web. Ahora abre tu página de inicio en tu navegador / explorador. Verás el enlace ‘Personalizar con CSS Hero’ en tu barra de administrador.

Al hacer clic en ese enlace, verás que se abren las opciones de CSS Hero. Pasa el cursor sobre el área a la que quieras añadir una imagen.

Al hacer clic en el área seleccionada, podrá ver la opción “Fondo” en la barra lateral izquierda.

Haz clic en “Fondo” para ver los ajustes para añadir una imagen.

Desde ahí, puedes hacer clic en “Imagen”. Ahora, puedes elegir una imagen de Unsplash o subir la tuya propia para crear tu fondo.

Cuando hagas clic en la imagen que quieras, verás el botón “Aplicar imagen”. Entonces podrás elegir el tamaño de la imagen. Puedes elegir la versión grande para que se extienda por toda la página.

Pulsa “Guardar y publicar” en la parte inferior para guardar la imagen de fondo de tu sitio.

Método 6. Añadir imágenes de fondo personalizadas en cualquier lugar en WordPress usando código CSS

Por defecto, WordPress añade varias clases CSS a diferentes elementos HTML en todo su sitio WordPress. Puede añadir fácilmente imágenes de fondo personalizadas a entradas 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 añadirá automáticamente estas clases CSS a la etiqueta del cuerpo cuando alguien vea la página de la categoría TV.

<body class="archive category category-tv category-4">

Puede usar la herramienta inspeccionar para ver exactamente qué clases CSS añade WordPress a la etiqueta cuerpo.

Puede utilizar las clases CSS category-tv o category-4 para cambiar el estilo de esta página de categorías.

Vamos a añadir una imagen de fondo personalizada a una página de archivo de categoría. Tendrás que añadir este CSS personalizado a tu tema.

body.category-tv {
background-image: url("http://example.com/wp-content/uploads/2017/03/your-background-image.jpg");
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}

No olvide sustituir la URL de la imagen de fondo y la clase de categoría por las de su propio sitio.

También puedes añadir fondos personalizados a entradas y páginas individuales. WordPress añade una clase CSS con el ID de la entrada o página en la etiqueta body. Puede utilizar el mismo código CSS, sólo tiene que sustituir .category-tv por la clase CSS específica de la entrada.

Esperamos que este artículo te haya ayudado a aprender cómo añadir una imagen de fondo en WordPress. Puede que también quieras ver nuestra guía sobre cómo crear una tienda online y el mejor software de diseño de sitios web.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.