Cómo cambiar los fondos repetitivos en los sitios de css3

Hay situaciones en las que sólo se desea una única copia de una imagen de fondo en su sitio CSS3. Puede ser que la imagen que se ha utilizado es algo que no se repite así o es lo suficientemente grande que realmente no desea que se repita. El siguiente procedimiento demuestra una técnica que puede utilizar para decirle al navegador para usar sólo una copia de la imagen de un fondo.

1. Abre el BackgroundPosition.CSS archivo.

2. Modificar el estilo de la carrocería para que la imagen no se repite, como se muestra aquí.

   body {background-image: url ("CuteCat.jpg") -Antecedentes-color: Saddlebrown-color: SeaGreen-font-size: x-large-text-shadow:-fondo-posición Yellow 1px 1px: centro-background-attachment:-background-repeat fijo: no-repeat-del fondo tamaño: 80% -}

   La propiedad background-repeat se define como no-repeat para que el navegador sabe para mostrar sólo una copia. Debido a que sólo hay una copia y la imagen puede no ser del tamaño adecuado para proporcionar una buena presentación cuando el usuario cambia el tamaño del navegador, también debe establecer la propiedad de fondo de tamaño para cambiar el tamaño de la imagen automáticamente.

3. Guarde el archivo CSS como NoRepeat.CSS.

4. Abra el archivo BackgroundPosition.HTML.

5. Modificar el etiqueta por lo que se ve así:

6. Guarde el archivo HTML como NoRepeat.HTML.

7. Cargar la página NoRepeat.

   Usted ve el fondo. Sólo hay una imagen en el centro ahora - y cuando cambia el tamaño del navegador, la imagen cambia automáticamente el tamaño también.

   

   Video: HTML5 CSS3 jQuery Fondo Imagen Autoajustable