Cómo diseñar fondos en css3

La mayoría de las páginas se mire 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.

  1. Cree el Archivos ExternalCSS.HTML y ExternalCSS.CSS y copiarlos a una carpeta nueva.

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

  3. ExternalCSS.CSS Abrir.

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

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

    El lugar más común para reservar imágenes de fondo está en el . Sin embargo, nada le 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 múltiples 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 quiere que se tome todo el área de visualización. El uso de 100% como el valor significa que la imagen cambia de tamaño automáticamente para ocupar toda el área cliente.

    Usted utiliza la propiedad background-repeat para determinar si la imagen se repite en el fondo. Es común que las imágenes pequeñas para repetir lo que ocupan la totalidad del área de visualización. Repetición de una imagen de gran tamaño tiende a hacer que el fondo se vea confuso y en detrimento de la apariencia general de la pantalla.

  5. Actualizar la página de prueba.

    Usted ve el efecto de hacer el cambio de estilo.

    imagen0.jpg
  6. Cambiar el tamaño de la ventana del navegador.

    Usted ve que la imagen de fondo cambia de tamaño automáticamente para ocupar toda el área de visualización.