Cómo hacer que el navegador de fondo detrás de mi página web

El contenido es el rey en Internet, pero pobre diseño de páginas web puede arruinar la experiencia y se apartará lectores. El elemento más visible es el fondo. Puede ser de un color sólido, una imagen de repetición o una fotografía a todo color. Puede utilizar los tres.

Instrucciones

Elegir el tipo apropiado de la Imagen

1 Enumerar las imágenes de su contenido del sitio web trae a la mente. Si su sitio utiliza un logotipo o imagen de usuario, lo utilizan como punto de partida para la lista.

2 Considere contenido y su uso. Un fondo puede afectar los tiempos de carga y la tensión del ojo. Los tiempos de carga debe ser rápido, y la tensión del ojo deben mantenerse al mínimo.

3 Crear, comisión o buscar posibles imágenes de fondo. Respetar los derechos de autor. Nunca suponga que las imágenes en Internet son legales para su uso.

4 Pon a prueba tus imágenes favoritas, fuentes y colores. Esto le ayudará a encontrar la mejor combinación para su sitio.

Preparación de la imagen de fondo

5 Cambiar el tamaño de la imagen. La mayoría de los equipos tienen una resolución de pantalla de 1024x768. Si va a utilizar una sola imagen, fija, mantener ese tamaño en mente.

6 Poner los elementos visuales más importantes en el lado izquierdo. resoluciones más pequeñas y tamaño de las ventanas serán recortar sus antecedentes desde el lado derecho.

7 Guarde el archivo como un archivo JPG o PNG. JPG funciona mejor para fotografías e ilustraciones para PNG.

8 Mantener el tamaño de archivo de la imagen por debajo de 100 KB. Eso mantendrá el tiempo de renderizado abajo de la página.

Escribiendo la hoja de estilo en cascada (CSS)

9 Establecer un color de fondo. Tipo: body {background-color: # FF0000;}

Los colores también se pueden especificar mediante un nombre, body {background-color: red;}, o RGB, {background-color: rgb (255,0,0);}.

10 Establecer una imagen de fondo. Tipo: body {background-image: url ( 'miimagen.jpg');}

Por defecto, los mosaicos de imágenes en todas las direcciones.

11 Establecer cómo los cuadros de imagen. Tipo: body {background-image: url ( 'miimagen.jpg'); background-repeat: repeat-x; }

"Repeat-x" establece el alicatado solo a la horizontal. Use la opción "repeat-y" para el alicatado vertical.

12 Crear una imagen que no se repite que se desplaza con la página. Tipo: body {background-image: url ( 'miimagen.jpg'); background-repeat: no-repeat; }

13 Colocar la imagen para que el texto se desplaza sobre ella. Tipo: body {background-image: url ( 'miimagen.jpg'); background-repeat: no-repeat; background-attachment: fija; }

Consejos y advertencias

• Cuando se trabaja con imágenes, iniciar grande. Las imágenes siempre se pueden reducir, pero no agrandados. Los detalles también se puede jalar de grandes imágenes para utilizar como elementos decorativos en el sitio web para hacer una experiencia de diseño más cohesionada.
• Imágenes en CSS son en relación con el archivo CSS.
• CSS se puede guardar en un archivo .css independiente, poner en la parte superior de la página web en la cabecera o escrita como estilos en línea. Un archivo separado que funciona mejor cuando un sitio web tiene varias páginas.