Advertisement
  1. Web Design
  2. Visuals

Consejo rápido: usar imágenes como fondos de degradado a pantalla completa

by
Read Time:5 minsLanguages:

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

En este rápido consejo te mostraré cómo crear un atractivo fondo degradado, usando cualquier imagen y un par de líneas CSS. Y aún más, hablaremos del rendimiento y explicaremos la propiedad background attachment conforme avancemos.


Entonces… ¿de qué va esto exactamente?

Vivimos en un mundo en el que la web (comprensiblemente) favorece el CSS y los elementos visuales generados por el navegador sobre el uso de imágenes. Las imágenes tienen una resolución limitada, lo que las hace muy poco flexibles. También pueden tener un impacto negativo en el rendimiento del sitio web, ya que su uso implica más solicitudes al servidor y un mayor consumo de ancho de banda.

Pero en ocasiones, podemos usar imágenes como recurso para crear un aspecto visual atractivo. No tienen porque ser extremadamente pesadas o de una resolución excesiva, además el efecto no se verá muy comprometido ni siquiera en las pantallas retina o de alta resolución. Echemos un vistazo a cómo podemos usar una imagen (en lugar de CSS) para crear un fondo degradado.


Paso 1: encuentra una imagen

Si quieres usar, modificar o compartir imágenes, sin tener que gastar los ahorros que te cuesta tanto ganar, siempre puedes recurrir a las Búsquedas avanzadas de imagen de Google. En la parte superior de la página de búsqueda (Herramientas > Derechos de uso), puedes seleccionar a qué tipo de derechos de uso quieres restringir tu búsqueda.


Paso 2: Crea un documento

Abre Photoshop y crea un nuevo archivo. Establece una anchura de 300px, una altura de 300px y una resolución de 72 PPI.


Paso 3: Importa y escala una imagen

Ahora importa la imagen que quieres modificar para convertirla en un degradado, escálala proporcionalmente para que se ajuste al tamaño del actual lienzo en Photoshop.


Paso 4: Aplicar el degradado

Para conseguir un gradiente con buen aspecto, pulsa Filtro > Desenfocar > Desenfoque gaussiano y ajústalo a 40 (en tu caso, puedes aumentar o disminuir este número dependiendo de tu imagen). Eso es todo.


Si te sientes perezoso, también puedes probar  a desenfocar con 100 Free Blurry Textures de pepsized.com.


Paso 5: Guardar para web

Tras completar los anteriores pasos, es hora de guardar tu fondo degradado, y para reducir el tamaño del archivo tanto como nos sea posible, al mismo tiempo que mantenemos una calidad de imagen razonable. Pulsa sobre Archivo > Exportar > Guardar para web, y establece el formato de imagen a JPEG.

Ahora para la compresión. Cuando alteres la calidad (Máximo, Muy alta, etc.) verás una previsualización del resultado final. Redúcela tanto como quieras, puedes ser más preciso si escribes valores numérico en el campo de la calidad (80 en nuestro caso) y establece un Desenfoque de 2. Si aumentas este último reducirás un poco más el tamaño del archivo y suavizarás cualquier pixelación presente en la imagen.

Marca la opción "Progresivo". Esto influirá en cómo se carga la imagen en el navegador. La carga progresiva significa que la imagen se cargará en varias fases; primero se cargará completamente en baja calidad, después con una calidad un poco superior, y después con un poco más, en lugar de cargarse línea por línea.

Pulsa "Guardar" para guardar tu imagen degradada. En la esquina inferior izquierda de la ventana, verás en qué medida has conseguido optimizar el tamaño de imagen.

Consejo rápido (dentro de un consejo rápido): guarda tus ajustes para próximas optimizaciones.

Una vez hayas establecido unos ajustes que te parezcan apropiados, ¿por qué no guardarlo para poder usarlo rápidamente de nuevo? Antes de hacer clic sobre "Guardar", pulsa sobre el pequeño icono de la esquina superior derecha que abre la ventana de diálogo "Guardar para web" y haz clic sobre "Guardar ajustes".


Paso 6: CSS

Aunque he creado una imagen pequeña, gracias a su naturaleza borrosa puede ajustarse a resoluciones más grandes sin perjudicar visiblemente su calidad. Para cargar esta imagen en tu sitio web como fondo usa este fragmento de CSS.

Explicación:

  • margin: 0 - Es posible que esto no sea necesario si has ajustado antes adecuadamente tu CSS. Esto eliminará el espacio en blanco alrededor de tu imagen, o en los bordes de la ventana de visualización de tu navegador.
  • background: url('bg.jpg') - Es la ruta de la imagen de tu fondo. Establece tu propia ruta dentro url('').
  • background-size: 100% 100%; - Esto ajusta la anchura y la altura de tu imagen de fondo. El primer valor se corresponde con la anchura, y el segundo con la altura. El motivo por el que he elegido un sistema basado en porcentajes es porque las proporciones permanecen inalterables y el tamaño es siempre relativo al del área de visualización de cualquier dispositivo. Un valor de 100% ocupará todo el área de visualización con independencia del navegador que estemos usando.
  • background-attachment: fixed - Al usar esta propiedad podemos especificar si el fondo va a desplazarse conforme deslicemos la visualización del sitio o permanecerá en una posición fija al hacerlo. En nuestro caso, queremos que permanezca fijo; no se desplazará junto con el resto del contenido. Hablaré de esta propiedad con más detalle más adelante.

Reducir las solicitudes HTTP

Una desventaja del uso de imágenes es que para mostrar cada una en el navegador sumamos una nueva solicitud al servidor. La cantidad de solicitudes simultáneas que podemos hacer son limitadas, así que podríamos producir un cuello de botella si estamos descargando muchos recursos del servidor.  Para evitar esto, podemos convertir nuestra imagen a base-64 e insertarla directamente en nuestro archivo CSS usando un URI de datos.

Existen un montón de servicios que gestionan esta tarea por ti, por ejemplo la autoproclamada "herramienta de dataURI super simple" duri.me está tremendamente fácil de usar.

Para saber más sobre cómo funciona, consulta la introducción de Chris Brown sobre URIs de datos.


Resultado final

Echa un vistazo a nuestra pequeña imagen de 300px, que ocupa todo la ventana de la pantalla de visualización. Puedes ver también la demo en vivo aquí.


Sobre background-attachment

La propiedad background-attachment se usa mayormente para especificar si las imágenes de fondo deberían desplazarse o permanecer en una posición fija respecto a su elemento padre.

Nosotros aquí la hemos usado en su forma más simple:

También es compatible con el uso de múltiples imágenes de fondo, aceptando múltiples valores separados por comas. En este ejemplo la primera imagen de fondo ("image1.png") se desplazará, la segunda ("image2.png") permanecerá fija:

Echa un vistazo a la demo.


Conclusión

Este es un método sencillo para conseguir degradados de fondo con un aspecto estupendo y fresco, en minutos. No olvides valorar si es mejor opción usar degradados CSS en su lugar, pero espero que te haya gustado este tutorial - ¡gracias por haber leído hasta aquí!   


Más recursos

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.