Desde que el autor lanzó una colección de grandes diseños web de fondo, he recibido muchos correos electrónicos que preguntan cómo usar CSS para implementar un gran diseño web de fondo. Por lo tanto, decidí compartir con ustedes las habilidades de diseño del sitio web en segundo plano. En este tutorial, usaré algunos ejemplos para ilustrar cómo usar una o dos imágenes para implementar el diseño de un gran sitio web de antecedentes.
Errores cometidos con frecuencia: el fondo se corta
Mirando el archivo de muestra, no hay problema cuando es menos de 1280 resolución. Pero si su monitor tiene una resolución superior a 1280 píxeles, verá la parte fuera de la imagen de fondo.
Una solución simple al problema: establezca el color del borde de la imagen en el mismo color que el fondo de la página web. Aquí uso la pared del diseñador web como ejemplo, miro la imagen a continuación y tenga en cuenta que los bordes de la imagen son colores sólidos.
Parte de CSS
Esta parte es simple, configure la imagen de fondo para el elemento del cuerpo (ubicado en el centro, arriba)
Aquí está el código CSS:
| cuerpo { relleno: 0; margen: 0; Antecedentes: #F8F7E5 URL (wdw-bg.jpg) no repetir el centro superior; Ancho: 100%; Pantalla: tabla; } |
Presta atención al hecho de que hay dos líneas adicionales en el selector del cuerpo, de modo que la imagen de fondo cambia cuando la ventana del navegador es más pequeña que el ancho de contenido, que aparecerá en Firefox.
