Las imágenes de fondo pueden transformar por completo cómo se ve y se siente tu sitio de WordPress. Pero las imágenes estiradas, la alineación incorrecta o los problemas de tamaño de archivo pueden interponerse. Especialmente si no estás seguro de qué método usar.
Por nuestra experiencia administrando docenas de sitios de WordPress, hemos aprendido que la mayoría de las personas hacen este proceso mucho más difícil de lo necesario.
La buena noticia es que WordPress ofrece varias opciones integradas para agregar imágenes de fondo, además de que existen excelentes plugins que lo hacen aún más fácil. Una vez que conozcas los métodos correctos, podrás agregar hermosos fondos a todo tu sitio, páginas individuales o secciones específicas en solo unos pocos clics.
En esta guía, te mostraremos 5 formas confiables de agregar imágenes de fondo en WordPress que funcionan para cualquier nivel de habilidad. 🎨
¿Por qué agregar una imagen de fondo en WordPress?
Agregar una imagen a tu sitio web de WordPress puede hacerlo más atractivo para los visitantes. Puedes captar rápidamente la atención de los usuarios e involucrarlos con tu contenido.
También te permite personalizar el diseño de tu sitio web de acuerdo con tu marca. Por ejemplo, puedes subir fotos sutiles de tus productos o mascota de marca en el fondo.
Además, puedes agregar un video de YouTube como fondo completo o una presentación de diapositivas de imágenes que dará vida a tu contenido.
Sin embargo, te sugerimos seleccionar imágenes de fondo que no distraigan o que dificulten la lectura del contenido en tu blog de WordPress. Un fondo debe mejorar la experiencia del usuario y ayudar a entregar tu mensaje a los visitantes.
Además, es importante elegir una imagen de fondo que sea compatible con dispositivos móviles y que no afecte la velocidad de tu sitio web. De lo contrario, perjudicará tu SEO de WordPress.
En este artículo, compartiremos diferentes formas en que puedes agregar una imagen de fondo en WordPress.
Cubriremos varios métodos, incluyendo el personalizador de temas de WordPress, el editor de sitio completo, plugins, constructores de temas y más. Simplemente haz clic en el enlace a continuación para saltar a tu sección preferida:
- Método 1. Agregar una imagen de fondo usando el personalizador de tu tema de WordPress
- Método 2. Agregar una imagen de fondo personalizada usando el editor de sitio completo
- Método 3. Agregar una imagen de fondo usando un constructor de temas de WordPress
- Método 4. Agregar una imagen de fondo usando CSS Hero
- Método 5. Agregar imágenes de fondo personalizadas en cualquier lugar de WordPress usando código CSS
- Recursos adicionales: Guías de archivos de imagen y medios para mejorar la experiencia de usuario del sitio de WordPress
¿Listo? Empecemos.
Método 1. Agregar una imagen de fondo usando el personalizador de tu tema de WordPress
La mayoría de los temas populares de WordPress vienen con soporte para fondos personalizados. Esta función te permite configurar fácilmente una imagen de fondo. Recomendamos este método si tu tema lo soporta.
Sin embargo, si tu opción de menú del personalizador falta, entonces tu tema puede tener habilitada la edición completa del sitio. En la siguiente sección, cubriremos cómo usar el editor de sitio completo para cambiar tu imagen de fondo.
Mientras tanto, para usar el 'Personalizador', necesitas visitar la página Apariencia » Personalizar en tu administrador de WordPress.
Esto iniciará el personalizador de temas de WordPress, que te permite cambiar diferentes configuraciones del tema mientras ves una vista previa en vivo de tu sitio web.
Ten en cuenta que las opciones que veas variarán según el tema de WordPress que estés utilizando. En este tutorial, estamos usando el tema Sydney.
Si estás utilizando un tema diferente, es posible que necesites consultar la documentación de ese tema. Si no puedes encontrar una imagen de fondo en el personalizador, también puedes contactar al desarrollador del tema para averiguar cómo agregar una.
En las opciones del personalizador del tema Sydney, necesitas hacer clic en 'General' en el panel de la izquierda.
Una vez que hagas eso, verás diferentes opciones de 'General' para personalizar tu tema Sydney.
En este punto, deberás hacer clic en la sección 'Imagen de fondo'.
En la siguiente pantalla, verás la opción para agregar tu imagen de fondo.
Haz clic en el botón 'Seleccionar imagen'.
Esto abrirá la biblioteca de medios de WordPress.
Aquí, puedes subir una imagen desde tu computadora o seleccionar una que hayas subido previamente.
Después de haber elegido la imagen para tu fondo, deberás hacer clic en el botón ‘Seleccionar’.
Esto cerrará la ventana emergente de medios y verás una vista previa de la imagen de fondo seleccionada en el personalizador del tema.
En el panel izquierdo, puedes ajustar la posición de la imagen (arriba, centro, abajo, izquierda, derecha) para controlar cómo aparece en el fondo. También puedes cambiar su tamaño usando el menú desplegable ‘Tamaño de imagen’ menú desplegable para ajustar, llenar o cubrir el área.
Si deseas que la imagen se repita en todo el fondo, marca la casilla que dice ‘Repetir imagen de fondo’. También puedes hacer que la imagen se desplace junto con el contenido de la página al marcar la casilla ‘Desplazar con página’.
Una vez que estés satisfecho con cómo se ve, haz clic en el botón ‘Publicar’ en la parte superior para guardar tu configuración.
Eso es todo. Has agregado exitosamente una imagen de fondo a tu sitio de WordPress. Visita tu sitio web para verlo en acción.
Método 2. Agregar una imagen de fondo personalizada usando el editor de sitio completo
Si estás utilizando un tema de WordPress basado en bloques, entonces puedes agregar una imagen de fondo personalizada usando el editor de sitio completo (FSE).
El editor de sitio completo te permite editar el diseño de tu sitio web usando bloques. Es como editar una publicación de blog o una página usando el editor de bloques de WordPress.
Para este tutorial, usaremos el tema predeterminado ‘Twenty Twenty-Two’. Para iniciar el editor de sitio completo, simplemente ve a Apariencia » Editor desde tu área de administración de WordPress.
Una vez que estés en el editor de sitio completo, deberás agregar un bloque de 'Portada' a tu plantilla para subir una imagen de fondo.
Simplemente haz clic en el signo '+' en la parte superior y agrega un bloque de 'Portada'.
Para agregar una imagen de fondo al bloque 'Portada', haz clic en el botón 'Subir' o 'Biblioteca de medios'.
Esto abrirá la ventana emergente del cargador de medios de WordPress.
El siguiente paso es elegir una imagen que te gustaría usar como fondo del sitio web.
Cuando hayas elegido la imagen, simplemente haz clic en el botón 'Seleccionar'.
Una vez que la imagen se agregue al bloque 'Portada', deberás configurarla como el fondo de la página.
Para hacerlo, simplemente haz clic en el ícono 'Vista de lista' en la parte superior (ícono con 3 guiones). Esto abrirá una vista de esquema de los elementos de la plantilla, como el encabezado del sitio y el pie de página.
Después de eso, simplemente arrastra y suelta todos los elementos de la plantilla debajo del bloque 'Portada' en la vista de lista.
Una vez que todos estén ahí, la imagen del bloque 'Portada' aparecerá como el fondo del sitio.
Después de eso, puedes ajustar la imagen de fondo haciendo clic en el bloque 'Portada' y seleccionando el ícono de engranaje en la esquina superior derecha de la pantalla. Esto abrirá el panel de configuración del 'Bloque'.
Aquí encontrarás opciones para hacer que la imagen sea un fondo fijo, ajustar su superposición, editar el color y más.
Cuando hayas terminado, no olvides hacer clic en el botón 'Guardar'.
¡Y eso es todo! Has agregado con éxito una imagen de fondo usando el editor de sitio completo.
Método 3. Agregar una imagen de fondo usando un constructor de temas de WordPress
Otra forma en que puedes agregar imágenes de fondo personalizadas a tu sitio web es usando un constructor de temas de WordPress como SeedProd. Es el mejor plugin de página de destino de WordPress con funcionalidad de arrastrar y soltar que te permite personalizar fácilmente el diseño de tu sitio web sin tocar una sola línea de código.
También usamos SeedProd en algunos de nuestros sitios de marca, y ha estado funcionando muy bien. Para más detalles sobre nuestra experiencia, puedes consultar nuestra extensa reseña de SeedProd.
Para este tutorial, usaremos la versión Pro de SeedProd porque incluye el constructor de temas. También hay una versión SeedProd Lite que puedes probar gratis.
Primero, necesitarás instalar y activar el plugin SeedProd. Si necesitas ayuda, por favor consulta nuestra guía sobre cómo instalar un plugin de WordPress.
Tras la activación, verás la pantalla de bienvenida de SeedProd en tu panel de WordPress.
A continuación, querrás ingresar tu clave de licencia y hacer clic en el botón ‘Verificar Clave’ para activar la versión pro del plugin. Puedes encontrar tu clave de licencia en tu área de cuenta de SeedProd.
Una vez que todo esté listo, deberás dirigirte a SeedProd » Theme Builder en tu panel de administración de WordPress.
Haz clic en el botón ‘Themes’ en la parte superior.
SeedProd ahora ofrecerá múltiples plantillas de temas para elegir.
Puedes pasar el cursor y hacer clic en cualquier plantilla que desees usar. Para este tutorial, usaremos la plantilla de tema ‘Starter’.
A partir de aquí, SeedProd generará diferentes plantillas como la página de inicio, entrada individual, página individual, barra lateral, encabezado y más.
Para agregar una imagen de fondo que aparezca en todo el sitio web y en todas las plantillas de tema, haz clic en la opción ‘Edit Design’ bajo Global CSS.
En la siguiente pantalla, verás la configuración global de CSS que puedes cambiar.
Simplemente haz clic en la opción ‘Fondo’ para empezar a personalizar.
Después de eso, verás las opciones de ‘Imagen de fondo’.
Haz clic en ‘Usar tu propia imagen’ para subir tu foto. Alternativamente, puedes hacer clic en el botón ‘Usar una imagen de stock’ para buscar una imagen de stock para usar como fondo de tu sitio web.
Una vez que hayas agregado una imagen de fondo, el constructor de SeedProd mostrará una vista previa en vivo.
Puedes ajustar la posición del fondo si es necesario. También puedes elegir si usar la cubierta a pantalla completa o repetirla, entre otras opciones.
Además, puedes editar el nivel de oscuridad de tu imagen de fondo moviendo el control deslizante ‘Atenuar fondo’. Cuanto mayor sea la puntuación, más oscura será la imagen.
Una vez que hayas terminado de editar la imagen de fondo, simplemente haz clic en el botón ‘Guardar’ en la parte superior y cierra la configuración de CSS global.
Si deseas agregar una imagen de fondo personalizada para diferentes partes de tu sitio web, puedes editar esas plantillas de tema individuales en SeedProd. Para más detalles, no dudes en consultar nuestra guía sobre cómo crear fácilmente un tema personalizado de WordPress.
Método 4. Agregar una imagen de fondo usando CSS Hero
CSS Hero es un plugin de WordPress que te permite hacer cualquier cambio en tu tema sin necesidad de codificar.
Puedes agregar imágenes de fondo rápidamente en unos sencillos pasos. Pero primero, necesitarás instalar y activar CSS Hero. Para más detalles, consulta nuestra guía sobre cómo instalar un plugin de WordPress.
Una vez que hayas hecho eso, puedes empezar a personalizar tu sitio web.
Lo primero que debes hacer es abrir tu página de inicio en tu navegador. Allí, verás el enlace 'Personalizar con CSS Hero' en tu barra de administración.
Simplemente haz clic en el enlace y verás que se abren las opciones de CSS Hero.
Una vez dentro, deberás pasar el cursor del ratón sobre el área a la que deseas agregar una imagen. Luego, haz clic en el área para acceder a la opción 'Fondo' en la barra lateral izquierda.
Haz clic en 'Fondo' para ver la configuración para agregar una imagen.
Desde allí, simplemente haz clic en 'Imagen'.
Luego, puedes elegir una imagen de Unsplash o subir la tuya para crear tu fondo.
Cuando hagas clic en la imagen que deseas, verás el botón ‘Aplicar imagen’.
Luego, es posible que desees elegir el tamaño que quieres que tenga tu imagen. Recomendamos elegir la versión grande para que se extienda por toda la página.
Finalmente, puedes presionar ‘Guardar y publicar’ en la parte inferior para guardar la imagen de fondo de tu sitio.
Método 5. Agregar imágenes de fondo personalizadas en cualquier lugar de WordPress usando código CSS
Por defecto, WordPress agrega varias clases CSS a diferentes elementos HTML en tu sitio de WordPress. Por lo tanto, puedes 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 tienes una categoría en tu sitio web llamada TV, entonces WordPress agregará automáticamente estas clases CSS a la etiqueta body cuando alguien vea la página de la categoría TV.
<body class="archive category category-tv category-4">
Puedes usar la herramienta de inspección para ver qué clases CSS agrega WordPress a la etiqueta body. Aquí tienes un ejemplo:
Puedes usar la clase CSS category-tv o category-4 para estilizar solo esta página de categoría de manera diferente.
Por ejemplo, agreguemos una imagen de fondo personalizada a la página de archivo de categorías.
Si bien es una práctica común modificar el archivo functions.php de un tema para agregar código CSS, es inseguro y no es muy amigable para principiantes. Un pequeño error y corres el riesgo de romper tu sitio web.
Es por eso que siempre recomendamos usar WPCode en su lugar. Es el mejor plugin para agregar fragmentos de código personalizados sin mucha complicación.
Usamos WPCode para agregar y administrar fragmentos de código en nuestras marcas. Ha sido una forma sencilla y eficaz de mantenernos organizados y que todo funcione sin problemas. Si desea obtener más información, consulte nuestra reseña detallada de WPCode.
Para hacer esto, instalemos y activemos el plugin WPCode. Si necesita ayuda, puede consultar nuestra guía sobre cómo instalar un plugin de WordPress.
📝 Nota: Puede usar la versión gratuita de WPCode para agregar fragmentos CSS personalizados. Sin embargo, actualizar a WPCode Pro le permite acceder al historial de revisiones completo de todos sus fragmentos, agregar píxeles de seguimiento de redes sociales, programar su código ¡y más!
Después de la activación, simplemente navegue a Fragmentos de código » + Agregar nuevo desde su área de administración de WordPress.
En la siguiente pantalla, querrá pasar el cursor sobre la opción ‘Agregar su código personalizado (Nuevo fragmento)’ y hacer clic en el botón ‘Usar fragmento’ cuando aparezca.
En la siguiente pantalla, puede comenzar agregando un título para su fragmento CSS personalizado. Es posible que desee elegir algo simple y relevante, ya que esto le ayudará a reconocer el código más adelante.
Después de eso, puede escribir o pegar el siguiente CSS personalizado en el cuadro ‘Vista previa del código’.
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 reemplazar la URL de la imagen de fondo y la clase de categoría con las de su propio sitio.
Así es como podría verse en el editor de WPCode:
Luego deberá establecer el ‘Tipo de código’ seleccionando ‘Fragmento CSS’ del menú desplegable.
Una vez que todo se vea bien, puedes cambiar el interruptor para activar el fragmento de código y hacer clic en ‘Guardar fragmento’.
Además, puedes agregar fondos personalizados a entradas y páginas individuales.
WordPress tiene una clase CSS con el ID de la entrada o página en la etiqueta body. Puedes usar el mismo código CSS y simplemente reemplazar .category-tv con la clase CSS específica de la entrada.
Para más detalles, consulta nuestro tutorial sobre cómo agregar CSS personalizado en WordPress.
Recursos adicionales: Guías de archivos de imagen y medios para mejorar la experiencia de usuario del sitio de WordPress
Esperamos que este artículo te haya ayudado a aprender cómo agregar una imagen de fondo en WordPress. También te puede interesar nuestra guía sobre:
- Cómo agregar imágenes correctamente en WordPress
- Cómo crear una galería de imágenes en WordPress
- Cómo crear un slider de video e imágenes para WordPress
- Cómo agregar miniaturas a los enlaces de entrada anterior y siguiente en WordPress
- Cómo incrustar Spotify en WordPress
- Cómo incrustar Apple Podcasts en WordPress
- El mejor software de diseño web
- Cómo optimizar imágenes para el rendimiento web sin perder calidad
Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.
Dayo Olobayo
Gracias por describir los métodos para agregar imágenes de fondo en WordPress, pero ¿qué se puede hacer sobre su impacto negativo en la velocidad de carga? ¿Hay consejos para acelerar el tiempo de carga al usar imágenes de fondo?
Soporte de WPBeginner
Siempre que optimices la imagen para la web, no debería tener un gran efecto en la velocidad de tu sitio en comparación con otras imágenes.
Administrador
Dayo Olobayo
De acuerdo. Leí un artículo aquí en WPBeginner sobre técnicas de optimización de imágenes. Definitivamente las pondré en práctica.
Mrteesurez
¡Gran pregunta! He enfrentado desafíos similares con las imágenes de fondo que afectan el tiempo de carga de mi sitio. Lo que hice fue optimizar las imágenes antes de subirlas, esto puede reducir el tamaño de los archivos sin sacrificar la calidad. Además, usar carga diferida (lazy loading) para las imágenes de fondo puede ayudar y considera usar una Red de Entrega de Contenidos (CDN) para acelerar la entrega de tus imágenes. Estos pasos han marcado una diferencia notable en el rendimiento de mi sitio. ¡Gracias por plantear este importante tema!
Mrteesurez
Aconsejo que se utilice una imagen de fondo que no sea distractiva o que tenga el mismo color que el texto o el título del contenido. Además, como blog, se debe considerar a las personas con discapacidad visual al elegir el tipo y color de imagen a usar. Gracias.
Soporte de WPBeginner
Those are definitely important to keep in mind
Administrador
Jiří Vaněk
¿Hay alguna forma de manipular no solo el fondo sino también la transparencia dentro de una imagen? En otras palabras, ¿es posible establecer un porcentaje de transparencia?
Soporte de WPBeginner
La mayoría de estos no tendrían eso por defecto, necesitarías incluir CSS para establecer la opacidad entre 1 y 0, por ejemplo:
opacity: 0.5;
Administrador
Jiří Vaněk
Gracias por el consejo. He vuelto para probar el efecto de transparencia y, usando CSS, finalmente logré que funcionara. Así que, gracias por el consejo y por proporcionar una solución funcional. Probablemente no lo habría descubierto por mi cuenta.
J-P Zacaropoulos
Hola. Estoy buscando un tema gratuito donde pueda cambiar la cabecera y tener 5 o 6 elementos de menú en la parte superior. En todos los que he mirado, no se puede cambiar el tema. Soy principiante y estoy tratando de configurar mi sitio web para mi nuevo negocio de redacción publicitaria. Gracias de antemano
Jean-Pierre
Soporte de WPBeginner
Si no puedes encontrar un diseño de tema específico, puedes echar un vistazo a plugins de constructores de páginas como los de nuestro artículo aquí: https://www.wpbeginner.com/beginners-guide/best-drag-and-drop-page-builders-for-wordpress/
Administrador
Jon
Intenté usar tu código CSS adicional con mi propia URL de .jpg. De hecho, he probado varias de la web y de mis propios archivos subidos. La URL siempre está en texto rojo y nunca hay una vista previa. He revisado el código letra por letra, con símbolos de comando y todo lo demás tiene color normal. La única codificación que he hecho antes es en Excel y Matlab, con una breve experiencia de "Hola Mundo".
¿Qué me falta?
Soporte de WPBeginner
Eso normalmente significaría que hay un error en cómo se agregó la URL al CSS. ¿Está la URL entre comillas dobles?
Administrador
Christine
He elegido un tema (negocios tranquilos) que tiene un fondo personalizado. Pero cuando voy a personalizar, no tengo la opción de imagen de fondo. ¿Qué me falta? Mi sitio web tiene 3 años y lo estoy actualizando ahora. ¿Hay algo más que necesite ser actualizado?
Soporte de WPBeginner
Si no te ofrece la opción de editar tu fondo, probablemente deberías contactar al soporte del tema para asegurarte de que no haya otra ubicación donde se establezca la imagen de fondo.
Administrador
RANI ANDLEEB
cómo agregar imagen/color en el cuerpo en un servidor local WAMP.
Soporte de WPBeginner
Sería lo mismo que un sitio en vivo, si no tienes la opción de editar el fondo, entonces puede que no sea una opción en el tema específico que estás usando.
Administrador
ricardo
¿qué pasa si estoy trabajando en un servidor local como xampp, qué ruta de archivo debo poner usando CSS para el encabezado, estoy usando el tema hestia?
Rio Bermano
Gracias wpbeginner