Cómo crear un fondo de una sola imagen css3

La manera más simple, más compatible para crear un fondo CSS 3 que tiene al menos un poco de realce es el uso de una sola imagen. La imagen de la derecha dice mucho sobre su sitio y proporciona continuidad entre las páginas. Debido a este enfoque es estándar, lo ves utilizado en una gran cantidad de sitios. Todo lo que necesita saber para usar es la propiedad Imagen de fondo, como se muestra en el siguiente procedimiento.

Crear un nuevo archivo HTML 5 con su editor de texto.

  • Escriba el siguiente código de la página HTML.

    Un Fondo de una única imagen

    El gato lindo

    Una página que tiene un gato lindo como un fondo.

    Video: Cómo crear el efecto Parallax solo con CSS3

  • Guarde el archivo como SingleImage.HTML.

    La muestra aparecerá en otros lugares, por lo que es importante nombramiento.

  • Crear un nuevo archivo CSS con su editor de texto.

  • Escriba la siguiente información de estilo CSS.

    body {background-image: url ("CuteCat.jpg") -Antecedentes-color: Saddlebrown-color: SeaGreen-font-size: x-large-text-shadow: 1px 1px Amarillo-}

    Esta es la forma más simple de una sola imagen de fondo. La propiedad background-imagen tiene una función única url () asociado a él. Sólo en caso de que el usuario no puede mostrar la imagen (o elige no hacerlo), es necesario establecer un color de fondo apropiado.

    Video: 4. Curso basico de CSS | Imágenes de fondo

    Dependiendo de la imagen (el ejemplo se utiliza una que es particularmente difícil de trabajar cuando se trata de texto), puede que tenga que ajustar el color y el tamaño del texto para hacer que el contenido sea fácil de leer.

    Este es un lugar donde el uso de la propiedad text-shadow puede hacer la diferencia entre la alegría de usuario y quejas de los usuarios. Use colores contrastantes para la fuente y la sombra de manera que los dos trabajan juntos para hacer que el contenido visible en contra de una imagen con una gama de colores.

  • Guarde el archivo como SingleImage.CSS.

    La muestra aparecerá en otros lugares, por lo que es importante nombramiento.

  • Cargar la página SingleImage.

    Usted ve el fondo. Observe que el gráfico se inicia en la esquina superior izquierda y repite automáticamente según sea necesario para llenar la ventana.

  • Artículos Relacionados