-
Cómo hacer un fondo fijo en CSS
-
Puede crear páginas Web con muchas propiedades de estilo. El uso de HTML y CSS (Cascading Style Sheets) se puede especificar varias reglas de estilo diferentes que determinan cómo aparecerá el contenido de la página Web. Entre las propiedades de estilo que puede declarar en el CSS es el fondo. Puede establecer las propiedades de fondo de los elementos y de la página HTML en su conjunto. Un fondo también puede contener una imagen que se puede repetir para llenar el espacio disponible y, opcionalmente, fijado de manera que no se mueva cuando el usuario desplaza la página.Instrucciones
1 Crea tu página Web. Si aún no dispone de una página Web utiliza construido la siguiente estructura muestra que incluye un enlace a una hoja de estilos externa:
<Html>
<Head>
<Link rel = "stylesheet" type = "text / css" href = "backstyle.css" />
</ Head>
<Body>
<Div> Aquí está el contenido de la página </ div>
</ Body>
</ Html>
La página contiene un solo elemento "div" puramente demostrar. Si desea dar a su archivo CSS un nombre diferente, alterar el atributo "link" elemento "href" para que se adapte el nombre que elija.
2 Preparar la imagen de fondo. Si ya tiene un archivo de imagen que desea utilizar en el fondo de su página web, subirlo a su servidor Web. Si el archivo de imagen es de tamaño grande puede que desee para optimizarlo para reducir la cantidad de tiempo que tarda en descargarse a través de la Web cuando la gente ve su página. Si va a descargar una imagen para utilizar como página de fondo o lo están creando mediante un programa de diseño gráfico Este es también un paso aconsejable. Puede reducir el tamaño de archivo de una imagen seleccionando la configuración de la calidad de la imagen cuando se guarda en un programa como Photoshop, Paint.NET o GIMP (GNU Image Manipulation Program).
3 Crear su código CSS mediante la apertura de un nuevo archivo en un editor de texto, guardarlo con el nombre "backstyle.css" o cualquier otro nombre que prefiera, recordando el atributo "href" en su elemento HTML "" debe coincidir con este nombre. Introduzca el establecimiento de su imagen elegida como fondo el siguiente código:
body {background: # 000000 URL ( "images / bgpic.jpg");}
Este código se supone que el archivo de imagen va a ser guardado en un directorio llamado "imágenes" que se almacenan en el mismo directorio que la página web en sí. Modificar el código para que se adapte el nombre y la ubicación del archivo de imagen si es necesario. El código también indica que cualquier área no cubierta por la imagen de fondo debe ser de color negro.
4 Alterar su código CSS para dictar si la imagen de fondo se repite o no. El código siguiente indica que la imagen se repite en el eje "y", pero no en el eje "x":
background: # 000000 URL ( "images / bgpic.jpg") repeat-y;
Otros valores opcionales para el fondo de repetición incluyen "repeat-x" para repetir en el eje "x" y "no-repeat" para mostrar la imagen una sola vez. Si no se incluye un valor para la propiedad de fondo de la repetición, el valor predeterminado es para la imagen que se repite a lo largo de ambos ejes.
5 Alterar su código CSS para fijar la imagen de fondo. El siguiente código extendido establece todas las propiedades de fondo en una sola declaración, incluyendo la configuración fija:
background: # 000000 URL ( "images / bgpic.jpg") repeat-y fijo;
La adición de la palabra "fijo" especifica que cuando la página se desplaza por el usuario la imagen de fondo no se desplazará junto con él sino que permanecerá en la misma posición. Guarde los archivos, subirlos a su servidor y navegar a ellos para probar su apariencia.
Consejos y advertencias
- Una imagen de fondo eficaz puede crear una apariencia elegante dentro de una página sin necesidad de trabajos de diseño gráfico detallado.
- Una imagen de fondo repetido puede parecer confuso en función de la imagen en cuestión.
