La mayoría de las páginas web tienen imágenes de fondo que se mueven verticalmente al hacer clic en la barra de desplazamiento del navegador. Todos los elementos de una página de desplazamiento de forma predeterminada. Utilización de hojas de estilo en cascada o CSS, puede alterar este comportamiento predeterminado y hacer ninguna imagen de fondo unscrollable. Esto crea un efecto intrigante "flotante". Los visitantes del sitio de desplazamiento a través de una página parecido ver el contenido de su movimiento, pero la imagen de fondo permanece fijo en un lugar específico.
Instrucciones
1 Poner en marcha el Bloc de notas y abra uno de sus documentos HTML. Elija un documento que es el tiempo suficiente para desplazarse. Idealmente, esta será una página web que contiene una gran cantidad de texto.
2 Agregue el siguiente bloque de código CSS a la sección de "cabeza" del documento:
<Style type = "text / css">
cuerpo
{
Imagen de fondo: URL ( "someImage.jpg"); background-attachment: fixed;
background-repeat: no-repeat; background-position: centro de centro;
}
</ Style>
3 Reemplazar "someImage.jpg" con el nombre de uno de sus imágenes. Por ejemplo, si desea utilizar una imagen llamada "defrag.gif" está en la carpeta "Herramientas" en su unidad "C", hacer que el bloque de código como el siguiente:
<Style type = "text / css">
cuerpo
{
Imagen de fondo: URL ( "C: \ Tools \ defrag.gif"); background-attachment: fixed;
background-repeat: no-repeat; background-position: centro de centro;
}
</ Style>
Si la imagen está en la Web, utilice la dirección URL de la imagen en su lugar. La propiedad background-attachment determina si la imagen se desplaza. Que no se desplaza si se establece el valor a "fijo" como se muestra arriba. El valor "no-repeat" le dice al navegador que no se repita la imagen para crear un efecto de la teja. La propiedad background-position le permite establecer las coordenadas horizontal y vertical de la imagen. En este caso, ambos son "centro". Esto hace que el navegador para centrar la imagen en la página web.
4 Guarde el documento HTML. Abrirlo en el navegador y desplazarse a través de la página Web. La imagen no se moverá.
Consejos y advertencias
- Para la representación para desplazarse, cambiar el valor de la background-attachment de "fijo" a "desplazamiento". Otros valores de posicionamiento posibles para la propiedad background-position incluyen "arriba", "abajo", "izquierda" y "derecha". Por ejemplo, si desea que la imagen permanece fija en la parte superior derecha de la página Web, cambie el valor de la posición de fondo de "centro centro" - como se muestra en este ejemplo - a "arriba a la derecha" (sin las comillas). También puede utilizar valores de píxel para las coordenadas horizontales y verticales. En lugar de utilizar "arriba a la derecha" o "centro centro", usted podría utilizar 200px 400px en su lugar. Esto solucionará la imagen 200 píxeles desde el borde izquierdo de la página y 400 píxeles desde la parte superior de la página.