Creación de su propia marca de agua de fondo fijo

Si eres diseñar un sitio web, es posible que le interese aprender a crear una imagen de fondo fija o una marca de agua en una página web. Este es un tratamiento de diseño común que ha sido popular en línea durante bastante tiempo. Es un efecto útil para tener en su bolsa de trucos de diseño web.

Si no lo ha hecho antes o lo ha intentado anteriormente sin suerte, el proceso puede parecer intimidante, pero en realidad no es muy difícil. Con este breve tutorial, obtendrá la información que necesita para aprender la técnica en cuestión de minutos usando CSS.

Empezando

Las imágenes de fondo o las marcas de agua (que en realidad son imágenes de fondo muy claras) tienen una historia en el diseño impreso. Los documentos han incluido durante mucho tiempo marcas de agua para evitar que se copien. Además, muchos volantes y folletos utilizan imágenes de fondo grandes como parte del diseño de la pieza impresa. El diseño web ha tomado prestados estilos de la impresión y las imágenes de fondo son uno de estos estilos prestados.

instagram viewer

Estas imágenes de fondo grandes son fáciles de crear usando los siguientes tres Estilo CSS propiedades:

  • imagen de fondo
  • repetición de fondo
  • adjunto de fondo
  • tamaño de fondo

Imagen de fondo

Utilizará background-image para definir la imagen que se utilizará como marca de agua. Este estilo simplemente usa una ruta de archivo para cargar una imagen que tiene en su sitio, probablemente en un directorio llamado imagenes.

imagen de fondo: url (/images/page-background.jpg);

Es importante que la imagen en sí sea más clara o más transparente que una imagen normal. Esto creará eso "filigrana"mirada en la que una imagen semitransparente se encuentra detrás del texto, los gráficos y otros elementos principales de la página web. Sin este paso, la imagen de fondo competirá con la información de su página y dificultará su lectura.

Puede ajustar la imagen de fondo en cualquier programa de edición como Adobe Photoshop.

Repetición de fondo

La propiedad background-repeat viene a continuación. Si desea que su imagen sea un gráfico grande con estilo de marca de agua, usaría esta propiedad para hacer que la imagen se muestre solo una vez.

repetición de fondo: no repetición;

Sin el no repetir propiedad, el valor predeterminado es que la imagen se repetirá una y otra vez en la página. Esto no es deseable en la mayoría de los diseños de páginas web modernas, por lo que este estilo debe considerarse esencial en su CSS.

Adjunto de fondo

El archivo adjunto de fondo es una propiedad que muchos diseñadores web olvidan. Su uso mantiene su imagen de fondo fija en su lugar cuando usa el reparado propiedad. Es lo que convierte esa imagen en una marca de agua que se fija en la página.

El valor predeterminado para esta propiedad es Desplazarse. Si no especifica un valor de archivo adjunto de fondo, el fondo se desplazará junto con el resto de la página.

archivo adjunto de fondo: fijo;

Tamaño de fondo

Background-size es una propiedad CSS más nueva. Le permite establecer el tamaño de un fondo en función de la ventana gráfica en la que se está viendo. Esto es muy útil para sitios web receptivos que se mostrará en diferentes tamaños en diferentes dispositivos.

tamaño de fondo: cubierta;

Dos valores útiles que puede utilizar para esta propiedad incluyen:

  • Cubrir - Escala el fondo para que se muestre el ancho completo o la altura completa. Esto significa que es posible que algunas partes de la imagen no aparezcan en la pantalla, pero que se cubrirá toda el área.
  • Contiene - Escala la imagen para que tanto el ancho como el alto se muestren en el área que se está aplicando estilo. La imagen no se corta, pero la desventaja es que es posible que la imagen no cubra partes del área.

Agregar el CSS a su página

Una vez que comprenda las propiedades anteriores y sus valores, puede agregar estos estilos a su sitio web.

Agregue lo siguiente al HEAD de su página web si está creando un sitio de una sola página. Agréguelo a los estilos CSS de una hoja de estilo externa si está creando un sitio de varias páginas y desea aprovechar el poder de una hoja externa.

Cambie la URL de su imagen de fondo para que coincida con el nombre de archivo específico y la ruta del archivo que sea relevante para su sitio. Realice cualquier otro cambio apropiado para que se adapte a su diseño también y tendrá una marca de agua.

También puede especificar la posición

Si desea colocar la marca de agua en una ubicación específica de su página web, también puede hacerlo. Por ejemplo, es posible que desee la marca de agua en el medio de la página o quizás en la esquina inferior, en lugar de la esquina superior, que es la predeterminada.

Para hacer esto, agregue la propiedad background-position a su estilo. Esto colocará la imagen en el lugar exacto donde le gustaría que aparezca. Puede utilizar valores de píxeles, porcentajes o alineaciones para lograr ese efecto de posicionamiento.

posición de fondo: centro;