Cómo Agregar una Imagen de Fondo en WordPress (6 Maneras Fáciles)

¿Quieres agregar una imagen de fondo a tu sitio de WordPress?

Las imágenes de fondo pueden hacer que su sitio web se vea más atractivo y animado.

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

¿Por qué agregar una imagen de fondo de WordPress?

Agregar una imagen a su sitio web de WordPress puede hacerlo más atractivo para los visitantes. Puede captar rápidamente la atención de los usuarios e involucrarlos con su contenido.

También le permite personalizar el diseño de su sitio web de acuerdo con su marca. Por ejemplo, cargue fotos sutiles de sus productos o mascotas de marca en el fondo.

Además, también puede agregar un video de YouTube como un fondo completo o una presentación de diapositivas de imágenes que le darán vida a su contenido.

Sin embargo, recomendamos elegir imágenes de fondo que no distraigan o dificulten la lectura del contenido de su blog de WordPress. El fondo debe mejorar la experiencia del usuario y ayudar a transmitir su mensaje a los visitantes.

También es importante elegir un fondo de pantalla que sea compatible con dispositivos móviles y que no ralentice su sitio web. De lo contrario, dañará su SEO de WordPress.

Sin embargo, veamos diferentes formas de agregar una imagen de fondo de WordPress. Cubriremos varios métodos, incluido el uso del personalizador de temas de WordPress, un editor de sitio completo, un complemento, un generador de temas y más.

Simplemente haga clic en cualquiera de los enlaces a continuación para ir a su sección favorita:

Método 1. Agrega una imagen de fondo usando el personalizador de temas de WordPress

Los temas de WordPress más populares vienen con soporte de fondo personalizado. Esta función facilita la configuración de una imagen de fondo y recomendamos este método si su tema lo admite.

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

Para usar el Personalizador, debe visitar Apariencia » Personalización página en su administrador de WordPress. Esto iniciará el personalizador de temas de WordPress donde puede cambiar varias configuraciones de temas mientras obtiene una vista previa de una versión en vivo de su sitio.

Es importante recordar que las opciones que ve variarán según el tema de WordPress que esté utilizando. Para este tutorial usaremos el tema Astra.

Si está utilizando un tema diferente, es posible que deba buscar la documentación de ese tema o comunicarse con el desarrollador del tema para averiguar cómo agregar una imagen de fondo si no puede encontrarla en el personalizador.

En las opciones de personalización del tema Astra, debe hacer clic en "Global" en el panel izquierdo.

Luego verá varias opciones globales para personalizar su tema Astra.

Continúe y haga clic en la sección Colores.

Aquí puede cambiar los colores del tema, incluido el color de fondo. También puede personalizar sus enlaces, cuerpo de texto, títulos, marcos y más.

Para agregar una imagen de fondo, desplácese hacia abajo hasta la sección Color de la superficie. Luego puede hacer clic en la opción "Fondo del sitio web" e ir a la pestaña "Imagen".

Luego simplemente haga clic en el botón "Seleccionar imagen de fondo".

Esto abrirá la biblioteca de medios de WordPress donde puede cargar una imagen desde su computadora o elegir una que haya cargado previamente.

Después de elegir la imagen para su fondo, debe hacer clic en el botón "Seleccionar".

Esto cerrará la ventana emergente multimedia y verá una vista previa de la imagen de fondo elegida en el personalizador de temas.

No olvide hacer clic en el botón 'Publicar' arriba para guardar su configuración.

Eso es todo. Ha agregado con éxito una imagen de fondo a su sitio de WordPress. Visite su sitio para verlo en acción.

Método 2. Agregue una imagen de fondo personalizada con un editor de sitio completo

Si usa un tema de WordPress basado en bloques, puede usar el Editor de sitio completo (FSE) para agregar una imagen de fondo personalizada.

El editor de sitio completo le permite editar el diseño de su sitio web usando bloques. Es como editar una publicación de blog o una página con el editor de bloques de WordPress.

Para este tutorial, usaremos el tema predeterminado Twenty Twenty-Two. Para iniciar el editor completo del sitio, simplemente vaya a Apariencia » Redactor desde tu panel de WordPress.

Una vez que esté en el editor completo del sitio web, deberá agregar un Bloque de portada a su plantilla para cargar una imagen de fondo.

Simplemente haga clic en el signo + en la parte superior y agregue Cover Block.

Continúe y haga clic en el botón "Cargar" o "Biblioteca de medios" en el bloque de portada para agregar una imagen de fondo al bloque.

Esto abrirá la ventana emergente del cargador de medios de WordPress.

Puede elegir una imagen para usar como fondo del sitio web.

Una vez que haya seleccionado la imagen, simplemente haga clic en el botón "Seleccionar".

Una vez que la imagen se agrega al Bloque de portada, el siguiente paso es configurarlo como fondo de página.

Para hacer esto, haga clic en el ícono de vista de lista (ícono de 3 líneas) en la parte superior para abrir una vista de esquema de elementos de diseño como encabezados y pies de página del sitio.

Luego simplemente arrastre y suelte todos los elementos de la plantilla debajo del Bloque de portada en la vista de lista.

Cuando todos estén debajo, la imagen del Bloque de portada aparecerá como fondo del sitio.

Luego puede personalizar el fondo de pantalla haciendo clic dentro del bloque de portada y seleccionando el ícono de ajustes en la esquina superior derecha de la pantalla. Esto abrirá la ventana de configuración del bloque.

Encontrará opciones para convertir la imagen en un fondo sólido o un fondo repetido, ajustar su superposición, editar el color y más.

Cuando haya terminado, no olvide hacer clic en el botón "Guardar".

¡Está! Ha agregado con éxito una imagen de fondo utilizando el editor de sitio web completo.

Método 3. Agregue una imagen de fondo usando WordPress Theme Builder

Otra forma de agregar imágenes de fondo personalizadas a su sitio web es usar un generador de temas de WordPress como Producto de semilla.

Este es el mejor complemento de página de destino de WordPress y creador de sitios web. Obtiene la funcionalidad de arrastrar y soltar para personalizar fácilmente el diseño de su sitio web sin tocar una sola línea de código.

Para este tutorial, utilizaremos la versión Pro de SeedProd, ya que incluye el generador de temas. también hay uno SeedProd Lite Una versión que puedes probar gratis.

Primero debe instalar y activar el complemento SeedProd. Si necesita ayuda, lea nuestra guía sobre cómo instalar un complemento de WordPress.

Una vez que el complemento esté activo, verá la pantalla de inicio de SeedProd en su panel de WordPress. Luego simplemente ingrese su clave de licencia y haga clic en el botón "Verificar clave". Puede encontrar la clave de licencia en la sección de su cuenta de SeedProd.

Entonces deberías ir SeedProd » Creador de temas en su área de administración de WordPress.

Continúe y haga clic en el botón Temas en la parte superior.

SeedProd ahora ofrece múltiples plantillas de temas para elegir.

Puede pasar el cursor sobre cualquier plantilla que desee usar y hacer clic en ella. Usemos la plantilla de tema de inicio para este tutorial.

Desde aquí, SeedProd genera varias plantillas, como página de inicio, publicación única, página única, barra lateral, encabezado y más.

Para agregar una imagen de fondo que aparecerá en todo el sitio y en todas las plantillas de temas, haga clic en Editar tema en CSS global.

En la siguiente pantalla, verá la configuración global de CSS que puede cambiar.

Simplemente haga clic en la opción "Fondo".

A continuación, verá las opciones de fondo de pantalla.

Continúe y haga clic en el botón "Usar su propia imagen" para cargar su imagen, o haga clic en el botón "Usar imagen de archivo" para buscar una imagen de archivo y usarla como fondo para su sitio web.

Después de agregar una imagen de fondo, el constructor SeedProd mostrará una vista previa en vivo.

El complemento también proporciona opciones para cambiar la posición del fondo. Puede elegir usar la portada en pantalla completa, configurarla para que se repita y más.

También puede editar qué tan oscura desea que sea la imagen de fondo moviendo el control deslizante de Oscuridad de fondo. Cuanto mayor sea la puntuación, más oscura será la imagen.

Cuando haya terminado de editar la imagen de fondo, simplemente haga clic en el botón Guardar en la parte superior y cierre la configuración global de CSS.

Si desea agregar una imagen de fondo personalizada para diferentes partes de su sitio web, puede editar estas plantillas de temas individuales en SeedProd.

Consulte nuestra guía para crear fácilmente un tema de WordPress personalizado para obtener más detalles.

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

Usar un complemento de WordPress para agregar una imagen de fondo es mucho más flexible que las opciones integradas de WordPress.

Primero, debe instalar y activar el complemento Full Screen Background Pro. Consulte nuestra guía paso a paso para instalar un complemento de WordPress para obtener más detalles.

Con este complemento, puede establecer un fondo diferente para cada publicación, página, categoría, etc. Además, se muestran automáticamente en modo pantalla completa y se adaptan a dispositivos móviles.

Después de la activación, debe visitar Apariencia » Imagen BG a pantalla completa para configurar los ajustes del complemento.

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.

Luego debe hacer clic en el botón "Guardar opciones" para activar su clave. Ahora puede 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.

Ahora debería ver la pantalla de carga del fondo de pantalla.

Haga clic en el botón Seleccionar imagen para cargar o seleccionar una imagen. Después de seleccionar la imagen, puede ver una vista previa en vivo de la imagen en su pantalla.

A continuación, debe especificar un nombre para esta imagen. Este nombre es solo para usted, por lo que puede ingresar cualquier cosa aquí. Finalmente, debe elegir dónde desea usar esto como su página de fondo.

Después de elegir si desea ser el fondo de todo el sitio, publicaciones, categorías, archivos o cualquier otro lugar, asegúrese de guardar los cambios.

Puedes añadir tantas imágenes como quieras a diferentes secciones del sitio web visitando Apariencia » Imagen BG a pantalla completa página y repita este proceso.

Si elige usar más de una imagen globalmente o para publicaciones, páginas y categorías, el complemento comenzará a mostrar imágenes de fondo automáticamente como una presentación de diapositivas.

Puede establecer el tiempo antes de que desaparezca la imagen y el tiempo después del cual un nuevo fondo de pantalla comienza a desvanecerse, ajuste en la configuración del complemento.

El tiempo que ingresa aquí es en milisegundos. 1 segundo son 1000 milisegundos. Si desea que una imagen de fondo desaparezca después de 20 segundos, debe ingresar 20000.

Asegúrese de hacer clic en el botón "Guardar opciones" para guardar los cambios.

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

Con Full Screen Background Pro, también puede configurar fondos de pantalla para publicaciones individuales, páginas, categorías, etiquetas y más.

Simplemente edite la publicación/página en la que desea mostrar un fondo de pantalla diferente. En la pantalla de edición de publicaciones, verá el nuevo campo Imagen de fondo de pantalla completa debajo del editor de publicaciones.

Para usar una imagen de fondo para categorías, publicaciones y páginas, debe visitar Apariencia » Imagen BG a pantalla completa y luego haga clic en el botón Agregar nueva imagen.

Después de cargar su imagen, puede seleccionar una categoría, publicaciones, páginas, archivos y otras opciones del menú desplegable "Elija el contexto en el que desea que aparezca esta imagen".

Suponga que desea mostrar una imagen de fondo para las páginas de categorías. Simplemente seleccione "Categoría" en el menú desplegable.

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

Por ejemplo, si desea agregar una imagen de fondo personalizada para ciertas categorías, simplemente ingrese los nombres de las categorías en el campo "Seleccionar categorías para limitar las imágenes".

No olvides guardar tu foto para guardar tu configuración.

Ahora ha agregado con éxito una imagen de fondo para publicaciones, páginas y categorías específicas.

Método 5. 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 rápidamente imágenes de fondo en unos pocos pasos simples. Primero necesitas instalar y activar CSS Hero. Consulte nuestra guía de instalación del complemento de WordPress para obtener más detalles.

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á un enlace "Personalizar con CSS Hero" en la barra de administración.

Después de hacer clic en este enlace, se abrirán las opciones de CSS Hero. Pase el cursor sobre el área a la que desea agregar una imagen.

Cuando hace clic en el área seleccionada, puede ver la opción "Fondo" en la barra lateral izquierda.

Continúe y haga clic en "Fondo" para ver la configuración para agregar una imagen.

Desde allí puede hacer clic en "Imagen". Ahora puede elegir una imagen de Unsplash o cargar la suya propia para crear su fondo.

Cuando haga clic en la imagen que desee, verá el botón Aplicar imagen. A continuación, puede elegir el tamaño que desea que tenga su imagen. Puede seleccionar la versión grande para que cubra toda la página.

Haga clic en "Guardar y publicar" a continuación para guardar la imagen de fondo de su sitio web.

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

De forma predeterminada, WordPress agrega múltiples clases de CSS a varios 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 con estas clases de CSS generadas por WordPress.

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

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

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

Puedes usar ambos category-tv o category-4 Clase CSS solo para diferentes estilos de página de esta categoría.

Agreguemos una imagen de fondo personalizada a una página de archivo de categoría. Debe 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");
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}

Asegúrese de reemplazar la URL de la imagen de fondo y la clase de categoría con URL de su propio sitio web.

También puede agregar fondos personalizados a publicaciones y páginas individuales. WordPress agrega una clase CSS con la ID de la publicación o página en la etiqueta del cuerpo. Puedes usar el mismo código CSS, solo reemplázalo .category-tv con la clase CSS postespecífica.

Esperamos que este artículo te haya ayudado a aprender cómo agregar una imagen de fondo en WordPress. También puede consultar nuestra guía para iniciar una tienda en línea y el mejor software de diseño de sitios web.

Si te ha gustado este artículo, suscríbete al nuestro. canal de Youtube para tutoriales en vídeo de WordPress. También puedes encontrarnos en Closermarketing.es y Facebook.