Cómo agregar una imagen de fondo en WordPress

Las imágenes de fondo pueden ayudar mucho hacer que su sitio web sea más atractivo para sus visitantes. Más convincentes que un fondo monocromático, pueden ilustrar un punto que está planteando o crear el ambiente para todo su sitio.

En este tutorial, le mostraremos varias formas en las que puede agregar una imagen de fondo en WordPress. Esto es lo que discutiremos:

Pero antes de comenzar, debemos tener en cuenta que no es posible dar una respuesta única y definitiva sobre cómo agregar una imagen de fondo en WordPress, debido a muchos factores que afectan el diseño general y el aspecto de una página web. El tema, sobre todo, dicta la capacidad o incapacidad de agregar una imagen de fondo a partes o la totalidad de una página. Le hemos proporcionado tres formas diferentes, pero es posible que no todas funcionen o que funcionen de forma diferente, según el tema que esté utilizando. Incluso el término «antecedentes» puede relacionarse con diferentes áreas de diferentes temas. Aún así, sigue leyendo, ya que uno de estos métodos podría ser justo lo que necesitas.

Cómo agregar una imagen de fondo usando la configuración de su tema

Este podría ser un buen momento para señalar que las imágenes grandes y de alta calidad tienden a ralentizar los tiempos de carga. Aún así, hay cosas que puede hacer para optimizar sus imágenes y hacerlas tan fáciles de cargar como sea posible. Si está creando un sitio web teniendo en cuenta la velocidad de carga, también hemos cubierto los fondos repetidos (en mosaico).

Si tu tema tiene un ajuste de fondo, como hacen muchos temas populares hoy en día, puede usarlo para configurar su imagen de fondo. La mayoría de los temas que tienen esta funcionalidad funcionan de la misma manera. Usamos el tema Twenty Twenty predeterminado de WordPress.

Primero, debe navegar al personalizador de temas desde Apariencia> Personalizar en su panel de WordPress.

A continuación, quieres el Imagen de fondo submenú en el lado izquierdo de la pantalla.

Al hacer clic en eso, te llevará a la Seleccionar imagen botón. Puede agregar una imagen de fondo de su biblioteca de medios o puede cargar una. Hemos seleccionado uno de nuestra biblioteca de medios.

Y ahí lo tienes, ahora has cambiado tu fondo.

El tema Twenty Twenty que estamos usando nos da algunas opciones aquí. Puede usar una imagen que se pueda colocar en mosaico (repetir), como nuestra pequeña hoja verde, o puede usar una sola imagen como fondo.

Si es así, necesitará imágenes de alta definición para su sitio web que ocuparán todo el ancho de su página, pero pueden tardar mucho en cargarse y pueden dar lugar a malas experiencias de usuario. Depende de usted averiguar qué imágenes y configuraciones funcionan para su tema y el estilo de su sitio web.

Sin embargo, tenga en cuenta que, si bien muchos temas tienen la opción de agregar una imagen de fondo de esta manera, la mayoría no lo hace, por lo que es posible que deba recurrir a uno de los otros dos métodos que hemos descrito en este artículo.

Cómo agregar una imagen de fondo usando CSS

Si es un usuario más práctico, también tiene la opción de cambiar su CSS para configurar una imagen de fondo para publicaciones individuales, pero también categorías, autores y otras clases de CSS.

Puede cambiar el fondo de una categoría o de todo el sitio web mediante el personalizador de temas. Navegue hasta él desde su panel de WordPress haciendo clic en Apariencia> Personalizar.

Una vez allí, abra el CSS adicional sección.

Deberá agregar algunas líneas de código al campo CSS para agregar una imagen de fondo. Para cambiar el fondo de todo el sitio web, use este código:

body {
background-image: url("XXX");
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}

Por supuesto, deberá reemplazar XXX con la URL de la imagen que le gustaría usar. Hemos seleccionado uno de nuestra biblioteca de medios.

Sin embargo, si desea cambiarlo para páginas con una determinada categoría, funciona un poco diferente. El código que quieres es este:

body.category-YYY {
background-image: url("XXX");
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}

Como se indicó anteriormente, deberá cambiar XXX a una URL de imagen válida, al mismo tiempo que cambiará YYY por una categoría válida.

¡Y eso es todo lo que hay que hacer!

Cómo agregar un fondo a secciones de contenido específicas

Ahora, como siempre, nuestra sugerencia es usar la funcionalidad de un tema siempre que pueda, ya que está probado y probado para funcionar. Sin embargo, si un tema que está utilizando no tiene la funcionalidad que necesita, probablemente puedas encontrar un complemento Eso hace. Nuestro complemento de elección es Fondos avanzados de WordPress. Una vez que haya instalado y activado el complemento, habrá ganado un bloque Gutenberg especial que puede usar para configurar un fondo dinámico.

Este complemento funciona principalmente configurando una especie de metabloque, que actúa como fondo y que luego debe completar con otro bloque o bloques.

Le mostraremos cómo hacer esto en una publicación.

Primero, crearemos una publicación desde nuestro panel de WordPress seleccionando Publicar> Agregar nuevo. Luego, después de escribir el título y poblarlo con dos bloques de párrafos, presionaremos Enter después del primer párrafo, y luego haremos clic en el más firmar y agregar un Fondo cuadra.

Ahora necesitas configurar el bloque. La configuración predeterminada es Color, que es un bloque de color simple que puede elegir si desea un fondo monocromático. Otra opción interesante es la Video antecedentes. Puede usar este complemento para configurar un fondo de video, ya sea en bucle o reproducción única, y ni siquiera necesita alojarlo en su sitio web: el complemento es compatible con videos alojados en YouTube y Vimeo. Para esta demostración, sin embargo, nos preocupa principalmente la Imagen antecedentes.

Haciendo clic en el Imagen , encontrará un conjunto de controles para este complemento. En el Imagen sección, haga clic en el Seleccionar imagen y cargue una imagen o seleccione una imagen de su biblioteca de medios.

Una vez que haya hecho eso, encontrará que la imagen ha ocupado parte del fondo. En el lado derecho, encontrará opciones de paralaje y espaciado que puede usar si desea que su sitio web se vea un poco más dinámico. En la parte superior, encontrará los controles de posición. Puede seleccionar qué parte de la imagen se mostrará en función de la posición del indicador en los ejes. El valor predeterminado (50% horizontal y 50% vertical) es donde lo dejaremos ahora, justo en el medio de la imagen.

Ahora, necesitaremos agregar el contenido al que esta imagen será el fondo. Para hacer eso, simplemente haga clic en el más firmar en el medio del bloque de fondo. Optaremos por un bloque de párrafo, pero puede elegir el bloque que desee. Una cita o un encabezado, por ejemplo, pueden verse muy bien contra un fondo de paralaje.

Hemos pegado nuestro texto y cambiado su color en la pestaña de configuración del bloque a blanco, para que sea mejor compensarlo con el fondo. Y eso es realmente.

Ahora, al hacer clic en el botón de vista previa, podemos ver el complemento en acción.

Y ahora puede agregar cualquier tipo de fondo que desee a cualquier sección de contenido individual de su sitio web que desee enfatizar.

En conclusión

Una imagen de fondo realmente puede hacer que su sitio web se destaque para sus usuarios como una aguja grande y brillante en un pajar de paja monótona. Sin embargo, eso tiene un costo: probablemente necesitará almacenar medios de gran formato, y estos afectarán negativamente los tiempos de carga. Aún así, los gráficos magníficos siguen siendo la mejor manera de causar una primera impresión duradera, y los usuarios de Internet esperan un diseño profesional y llamativo. Es probable que el fondo sea el elemento gráfico más grande en las pantallas de sus visitantes. Si puede permitirse el aumento del tiempo de carga, ¿por qué no hacer que la experiencia de sus visitantes sea visualmente interesante? Entonces, ya sea que lo haga usando la configuración nativa de su tema, un complemento o CSS, ahora sabe cómo hacerlo.