Cómo crear una imagen única Fondo de CSS3 - Dummies

La forma más simple y más compatible de crear un fondo CSS3 que tenga al menos un poco de dinamismo es usar una sola imagen. La imagen de la derecha dice mucho sobre su sitio y proporciona continuidad entre las páginas. Debido a que este enfoque es estándar, lo verá utilizado en muchos sitios. Todo lo que necesita saber para usarlo es la propiedad de la imagen de fondo, como se muestra en el siguiente procedimiento.

1. Crea un nuevo archivo HTML5 con tu editor de texto.

2. Escriba el siguiente código para la página HTML.

   Un fondo de imagen única
   The Cute Cat
   Una página que tiene un lindo gato como fondo.
   

3. Guarde el archivo como SingleImage. HTML.

   La muestra aparecerá en otras ubicaciones, por lo que nombrar es importante.

4. Crea un nuevo archivo CSS con tu editor de texto.

5. Escriba la siguiente información de estilo CSS.

   cuerpo {background-image: url ("CuteCat. Jpg"); color de fondo: SaddleBrown; color: SeaGreen; tamaño de fuente: x-large; text-shadow: 1px 1px Amarillo;}
   

   Esta es la forma más simple de una sola imagen de fondo. La propiedad background-image tiene una sola función url () asociada a ella. Solo en el caso de que el usuario no pueda mostrar la imagen (o decida no hacerlo), debe establecer un color de fondo apropiado.

   Dependiendo de la imagen (el ejemplo usa uno con el que es particularmente difícil trabajar cuando se trata de texto), es posible que deba establecer el color y el tamaño del texto para que el contenido sea fácil de leer.

   Este es un lugar donde el uso de la propiedad text-shadow puede marcar la diferencia entre la satisfacción del usuario y las quejas de los usuarios. Utilice colores contrastantes para la fuente y la sombra, de modo que los dos funcionen juntos para hacer que el contenido se vea frente a una imagen con una gama de colores.

6. Guarde el archivo como SingleImage. CSS.

   La muestra aparecerá en otras ubicaciones, por lo que nombrar es importante.

7. Cargue la página SingleImage.

   Ves el fondo. Tenga en cuenta que el gráfico comienza en la esquina superior izquierda y se repite automáticamente según sea necesario para llenar toda la ventana.