Cómo agregar una imagen de fondo en WordPress

¿Le gustaría agregar una imagen de fondo a su sitio web de WordPress? Las imágenes de fondo se pueden usar para que su sitio web se vea más atractivo y más estético. En este artículo, le mostraremos cómo agregar fácilmente una imagen de fondo a su sitio web de WordPress.

Tutorial de video
Suscríbete a WPBeginner
Si prefiere las instrucciones escritas, continúe leyendo. Método 1. Agregue una imagen de fondo utilizando WordPress Los temas de WordPress más populares vienen con soporte de fondo personalizado. Esta característica le permite establecer fácilmente una imagen de fondo en su sitio de WordPress o cambiar el color de fondo.
Si su tema acepta la función de fondo personalizada, recomendamos usar este método para agregar una imagen de fondo a su sitio web de WordPress. Sin embargo, si su tema no acepta esta función o no le gusta cómo implementa imágenes de fondo, puede probar las otras opciones mencionadas en nuestro tutorial. Primero debe visitar la página de la página »Personalización de su administrador de WordPress. Esto lanzará el personalizador de WordPress, donde puede cambiar la configuración de temas diferentes al ver una vista previa en vivo de su sitio web.

Luego debe hacer clic en la opción “Imagen de fondo de pantalla”. El panel se deslizará y le mostrará las opciones para cargar o seleccionar una imagen de fondo para su sitio web.

Haga clic en el botón Seleccionar imagen para continuar. Esto mostrará la ventana emergente de WordPress Media, donde puede cargar una imagen desde su computadora. También puede seleccionar una imagen cargada anteriormente de la biblioteca de medios. Esto cerrará la ventana emergente de carga de medios y verá la vista previa de la imagen seleccionada en el personalizador del tema.

Bajo la imagen, podrá ver las opciones de la imagen de fondo. En el “preajuste”, puede seleccionar cómo desea mostrar la imagen de fondo: pantalla de llenado, pantalla coincidente, repetición o personalizada. También puede seleccionar la posición de la imagen de fondo haciendo clic en las flechas a continuación. Si hace clic en el centro, la imagen se alineará con el centro de la pantalla. Recuerde hacer clic en el botón “Guardar y publicar” en la parte superior para almacenar su configuración. Por lo tanto, ha agregado con éxito una imagen de fondo a su sitio web de WordPress. Continúe y visite su sitio web para verlo en acción.

Método 2. Agregue 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 establecer más imágenes de fondo. También puede establecer diferentes fondos para cualquier publicación, página, categoría u otra sección de su sitio de WordPress. Haga todas las imágenes de fondo automáticamente en una pantalla completa y receptivo para dispositivos móviles. Esto significa que la imagen de fondo cambiará automáticamente en dispositivos más pequeños. Primero, debe instalar y activar el complemento de fondo de pantalla completa Pro. Para obtener más detalles, consulte nuestra guía Paso por paso sobre cómo instalar un complemento de WordPress. En la activación, debe visitar la imagen BG de pantalla completa para configurar la configuración del complemento.
Se le pedirá que agregue la 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 de Plough. Luego debe hacer clic en el botón “Guardar la configuración” para almacenar los cambios. Ahora está listo para comenzar a agregar imágenes de fondo a su sitio web de WordPress. Continúe y haga clic en el botón “Agregar una nueva imagen” en la página Configuración del complemento. Esto lo llevará al fondo de la imagen de fondo.
Haga clic en el botón “Elija imagen” para cargar o seleccionar una imagen. Tan pronto como seleccione la imagen, podrá ver una vista previa de imagen en vivo en la pantalla. Entonces debe proporcionar un nombre para esta imagen. Este nombre se usará internamente para que pueda usar cualquier cosa aquí. Finalmente, debe seleccionar dónde desea que esta imagen se use como página de fondo. Full Screen Background Pro le permite establecer imágenes como fondo global o puede elegir entre diferentes secciones de su sitio web, tal Guardar la imagen de fondo.

Puede agregar cuántas imágenes desea visitar la página de la página »Complete la imagen de la imagen BG. Si establece más imágenes para usar a nivel mundial, el complemento comenzará a mostrar automáticamente las imágenes de fondo como una presentación de diapositivas. Puede ajustar el tiempo requerido para que desaparezca una imagen y el tiempo por el cual una nueva imagen de fondo comienza a desvanecerse.

El tiempo que ingresa aquí es en milisegundos. Si desea que desaparezca una imagen de fondo después de 20 segundos, deberá ingresar 20000.
Recuerde 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 le permite establecer imágenes de fondo para publicaciones, páginas, categorías, etiquetas y más. Edite solo la publicación / página donde desea mostrar una imagen de fondo diferente. En la pantalla de publicación, notará el nuevo cuadro “Imagen de fondo de pantalla completa” en el editor de publicaciones.

Para usar una imagen de fondo para una categoría en particular, debe visitar la página de la página »Imagen de pantalla completa BG y luego hacer clic en el botón” Agregar una nueva imagen “. Después de cargar la imagen, puede seleccionar” Categoría “como un contexto en el que usted Desea mostrar la imagen de fondo.

Ahora ingrese la ID de categoría específica o el servidor que desea mostrar la imagen. Consulte nuestra guía sobre cómo encontrar la ID de categoría en WordPress. No olvide guardar la imagen para almacenar su configuración. Método 3. Agregue imágenes de fondo utilizando CSS Hero CSS Hero es un complemento de WordPress que le permite realizar cualquier cambio en su base sin alcanzar una sola línea de código. Puede agregar imágenes de fondo rápido en algunos pasos simples. Primero, debe instalar y activar CSS Hero. Después de haber hecho esto, es hora de comenzar a personalizar su sitio.
Ahora abra la página de inicio en el navegador. Verá el enlace “Personalizar con CS Shero” en la barra de administración.

Después de hacer clic en el enlace, verá opciones de abrir CSS Hero. Coloque el mouse sobre el área donde desea agregar una imagen. En la captura de pantalla a continuación, verá. Encabezado de grado de filtro. Al hacer clic en esta área, puede elegir el enlace de fondo en la barra lateral izquierda.
El enlace de fondo se abrirá. Desde allí, puede hacer clic en la “imagen”. Ahora puede elegir una imagen Unsplash o sus cargas para crear su fondo.

Al hacer clic en la imagen deseada, verá el botón “Aplicar imagen”. Luego puede elegir qué tamaño desea tener su imagen. He elegido la gran versión, para que esté en la página. Presione “Guardar y publicar” en la parte inferior, y la imagen de fondo ahora se guarda para su sitio. Metoda 4. Agregue imágenes de fondo personalizadas en cualquier lugar de WordPress usando el código CSS de forma predeterminada, WordPress agrega más clases de CSS a diferentes elementos HTML en su WordPress sitio web. 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 Numita TV, entonces WordPress agregará automáticamente estas clases CSS a la etiqueta del cuerpo cuando alguien ve la página de categoría de TV.
Puede usar la herramienta de inspección para ver exactamente qué clases CSS agregan WordPress a la etiqueta del cuerpo.

Puede usar la clase Category-TV o Categoría-4 CSS para estilizar esta página de categoría diferente. Agreguemos una imagen de fondo personalizada a una página de archivo de categorías. Deberá agregar este CSS personalizado a su tema. Category-TV {

Background-image: URL (“http://example.com/wp-content/uploads/2017/03/your-background-image.jpg”);

Presión de fondo: centro central;

Tamaño de fondo: cubierta;
Background-Read: No-Reed;

Atacamiento de fondo: fijo;
}