Cómo Estirar El Fondo Del Sitio Web

Tabla de contenido:

Cómo Estirar El Fondo Del Sitio Web
Cómo Estirar El Fondo Del Sitio Web

Video: Cómo Estirar El Fondo Del Sitio Web

Video: Cómo Estirar El Fondo Del Sitio Web
Video: tutorial html y css | propiededades background y como ajustar el fondo al navegador 2024, Mayo
Anonim

El lenguaje de marcado HTML permite que un diseñador web utilice cualquier imagen como imagen de fondo. Sin embargo, el lenguaje en sí carece de controles integrados para las imágenes de fondo. Se realiza un ajuste más fino utilizando hojas de estilo CSS en cascada.

Cómo estirar el fondo del sitio web
Cómo estirar el fondo del sitio web

Instrucciones

Paso 1

Para que el fondo se extienda a todo el ancho del navegador, debe usar el parámetro z-index en su CSS. Te permite establecer el orden de los elementos que creas. Cuanto mayor sea el valor de este atributo, más alto se ubicará el bloque en la página.

Paso 2

Cree nuevos documentos en formato html y css (botón derecho del mouse - "Nuevo" - "Archivo de texto") y ábralos usando cualquier editor de texto.

Paso 3

Coloque la imagen de fondo en la capa inferior. Se estirará dependiendo de la resolución de la pantalla. En la parte superior, se ubicará otro elemento en el que se mostrará el contenido de la página. Para hacer esto, cree dos bloques. En el archivo css escriba:.1layer {índice z: 1; ancho: 100% alto: 100% posición: absoluta;}. 2layer {Posición: absoluta; índice z: 2; } El parámetro posición: absoluta le permite establecer el posicionamiento absoluto, es decir la capa se colocará independientemente de otros elementos.

Paso 4

Incluya el código CSS generado en el archivo HTML usando la etiqueta de enlace: Fondo de la página

Paso 5

Crea una nueva capa. Usando la etiqueta

coloque una imagen en él. Por ejemplo: Contenido de la página Para img, solo se especifica el parámetro de ancho, porque si especifica adicionalmente alto, en algunos navegadores, aparecerá una distorsión de la imagen.

Paso 6

Guarde sus cambios. Para probar su código, amplíe la página en la ventana de su navegador. La imagen de fondo también debe ampliarse.

Recomendado: