Esta guía le mostrará cómo revolucionar el aspecto de su página web mediante la inserción de una imagen de fondo. Tenga en cuenta que algunos diseños de plantillas son más adecuados para añadir imágenes de fondo que otras. En este ejemplo, usted verá cómo lo hacemos con el diseño de plantilla 157j, el cual es un proceso relativamente fácil.

Elija una imagen de fondo, que sea al menos 1920x1080 pixeles para adaptarse al tamaño normal de un monitor Full HD. Puesto que este tipo de imágenes pueden ser bastante grandes, es bueno experimentar con el formato. Los diseños geométricos guardados como archivos .png ocupan menos espacio, incluso en Full HD. El tamaño no debe ser mayor que 500 KB. Incluso las imágenes de este tamaño pueden tardar en cargarse para los usuarios con conexiones lentas a Internet.

Cambie el diseño de la plantilla. Vaya a la pestaña “Diseño” y seleccione el diseño de plantilla 157j.

Haga clic en “Utilizar diseño”.

Su página web se verá así.

Vaya a “Editar CSS” y suba la imagen que le gustaría utilizar como fondo. Puede hacer esto pasando el cursor por encima del icono verde “+” en la esquina superior derecha de “Editar CSS” y seleccionando “Subir nueva imagen al servidor”.

Una vez subida la imagen, copie y pegue toda la URL en el código CSS (más detalle a continuación).

Al utilizar este diseño de plantilla insertaremos la URL de la imagen en el selector “body” sustituyendo la imagen de fondo actual (“background-image”). No cambie nada, sólo el valor de la imagen de fondo dentro de los paréntesis y comillas. Luego haga clic en “Guardar”.

Vaya a su página web para ver cómo se ve.

Si el texto negro es difícil de leer en contraste con su nuevo fondo, cámbielo a blanco. Puede hacer esto en “Editar CSS”. En el selector “body” cambie el valor de “color” a RGB (255,255,255), y haga clic en “Guardar”.

Vaya a su página web para ver cómo se ve ahora.

Si no desea que la imagen de fondo se repita en monitores de gran tamaño, añada “background-repeat: no-repeat;” y asegúrese de que el valor de “background-position” es “center”. También es posible que desee cambiar el color de fondo (“background-color”) para que este a tono con su imagen. (Usted no será capaz de ver el color de fondo en todas las pantallas.) Utilice un selector de color para elegir un color adecuado y obtener su rgb.

En algunos diseños de plantillas la configuración predeterminada para “background-attachment” es “scroll”. En otras palabras, cuando se desplaza por la página la imagen se moverá hacia arriba y ya no cubrirá toda la pantalla. Si este es el caso y desea que la imagen de fondo permanezca en el mismo lugar, sin importar donde esté en la página, añada “background-attachment: fixed;” al código CSS.