Cómo diseñar fondos en css3

La mayoría de las páginas que miras tienen algún tipo de fondo. El siguiente procedimiento muestra cómo agregar un fondo utilizando CSS3, que se puede utilizar para hacer que su página web se vea más atractivo para el visitante.

crear el ExternalCSS.HTML archivos y ExternalCSS.CSS y copiarlos a una nueva carpeta.

  • Crear u obtener una imagen de fondo en formato Joint Photographic Experts Group (JPEG) y el nombre de background.jpg.

  • ExternalCSS.CSS abierta.

  • Escriba el siguiente código después de los estilos existentes y guardar los cambios en el disco.

    body {background-image: url ("background.jpg") -Antecedentes-size: 100% -Antecedentes-repeat: no-repetibilidad}

    El lugar más común para reservar las imágenes de fondo se encuentra en el . Sin embargo, nada impide utilizar fondos en otros objetos y de varias otras maneras.

    El punto de partida para la mayoría de los fondos es la propiedad background-imagen donde se puede especificar la imagen que desea utilizar con el método url (). Es posible añadir varias imágenes para el fondo. Si lo hace, el navegador combina las imágenes en una sola presentación.

    El uso de la propiedad background-size determina el tamaño de la imagen aparece en pantalla. El ejemplo es un cuadro grande, por lo que desea para que ocupe toda la pantalla. Utilizando el 100% como el valor significa que la imagen cambia de tamaño automáticamente a ocupar todo el área de cliente.

    Se utiliza la propiedad background-repeat para determinar si la imagen se repite en el fondo. Es común para las pequeñas imágenes para repetir lo que ocupan toda el área de visualización. Repetición de una imagen grande tiende a hacer que el fondo de la mirada confusa y en detrimento de la apariencia general de la pantalla.

  • Actualizar la página de prueba.

    Se ve el efecto de hacer que el cambio de estilo.

  • Cambiar el tamaño de la ventana del navegador.

    Se ve que la imagen de fondo cambia automáticamente el tamaño para ocupar toda la pantalla.

  • Artículos Relacionados