Hacer que el fondo de una bitácora se adapte a cualquier resolución de pantalla

  Una bitácora​, popularmente conocida por su nombre en inglés "blog"​, es un sitio web que incluye, a modo de diario personal de su autor o autores, contenidos de su interés, que suelen estar actualizados con frecuencia y a menudo son comentados por los lectores.
  Sirve como publicación en línea de historias con una periodicidad muy alta, que son presentadas en orden cronológico inverso, es decir, lo más reciente que se ha publicado es lo primero que aparece en la pantalla. Antes era frecuente que las bitácoras mostraran una lista de enlaces a otras bitácoras u otras páginas para ampliar información, citar fuentes o hacer notar que se continúa con un tema que empezó otro blog.
  Actualmente, una bitácora puede tener diversas finalidades según el tipo, taxonomía o incluso su autoría, como por ejemplo para reforzar la marca personal del autor, generar información para comunidades temáticas concretas o incluso servir como medio para buscar oportunidades laborales.
  Uno de los medios más populares para crear bitácoras es Blogger. Se trata de un servicio creado por Pyra Labs y adquirido por Google en el año 2.003, que permite crear y publicar una bitácora en línea. Para publicar contenidos, el usuario no tiene que escribir ningún código o instalar programas de servidor o de scripting.
  Las bitácoras alojadas en Blogger generalmente están alojadas en los servidores de Google, dentro del dominio "blogspot.com". Las opciones que ofrece son gratuitas y sencillas de utilizar.
  La tecnología utilizada por Blogger para la creación de bitácoras es muy similar a la que emplean los gestores de contenidos, pero más simple. Para personalizar el aspecto de una bitácora se suelen utilizar, principalmente, las secciones "Diseño" y "Tema" de su menú. En esta segunda opción aparecen numerosas plantillas con las que poder darle un aspecto decente a la bitácora del usuario; es más, una vez escogida una, es posible, en mayor o menor medida, personalizarla todavía más. 
  Dependiendo del tema elegido, es posible modificar o no el fondo de pantalla que tendrá toda la bitácora con las opciones gráficas del botón "Personalizar", pero no suele haber una opción para que dicho fondo de pantalla cambie de resolución según en la pantalla que esté, por lo que un fondo de pantalla con un dibujo puede quedar poco estético en la bitácora, como muestra la siguiente imagen (puede verse, a la derecha, el final del lado derecho de la  imagen de fondo y, como está en mosaico, el principio de su lado izquierdo de nuevo).

  Para solucionar este problema hay que mirar en las "tripas de código" (generalmente HTML5 y JavaScript) de la plantilla del tema que se está utilizando en la bitácora. Para poder hacerlo se debe seguir la ruta "Tema > Editar HTML".

  Antes de realizar cambios en el código que se muestra (sobretodo si no se sabe lo que se hace), es necesario averiguar la ruta del lugar donde se aloja la imagen que se desea utilizar de fondo de la bitácora. El modo de hacer esto es bastante sencillo:
  •   Se abre una nueva pestaña o una nueva ventana del navegador (mejor si es uno que permite ver la imagen de fondo de una página por separado como Firefox).
  •   Se accede a la bitácora.
  •   Se pulsa, con el botón derecho del ratón, sobre la imagen de fondo.
  •   En el menú emergente, se pulsa sobre "Ver imagen de fondo" (u opción similar).
  •   En la nueva ventana, o pestaña, donde sólo se ve la imagen, se vuelve a pulsar sobre ella con el botón derecho del ratón.
  •   En el menú emergente se pulsa la opción "Copiar la ruta de la imagen" (u opción similar).
  Con la ruta copiada (no es mala idea pegarla en un documento en blanco o algo similar para tenerla segura hasta que se deba utilizar), se regresa a la pantalla de edición de HTML de Blogger.
  En esta pantalla se busca el final de la etiqueta de HTML "<head>" ("</head>"), y, justo encima, se crea la etiqueta "<style>...</style>". En el interior de esta útlima etiqueta se insertará el siguiente código en el lenguaje de marcas CSS3:

body{
  background: url(ruta de la imagen de fondo a utilizar) no-repeat fixed center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  }
  Finalmente se pulsa en el botón "Guardar tema", se espera a que el programa lo haga, y se pulsa el botón "Atrás". Puede verse el resultado en distintos navegadores de red (mejor en aquellos cuya resolución de pantalla sea mayor).

  Espero que esta entrada haya resultado interesante y/o útil al lector. Si es así, aguardo que la comparta y/o la comente, por favor.

No hay comentarios:

Publicar un comentario

Deje aquí su comentario, si no puede comentar, pruebe a hacerlo desde otro navegador de red u otro equipo.