Cómo hacer un estiramiento de fondo de pantalla en CSS

Escrito por sara williams | Traducido por luis alberto fuentes schwab
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo hacer un estiramiento de fondo de pantalla en CSS
Cómo estirar un fondo de pantalla en CSS. (Ryan McVay/Photodisc/Getty Images)

La mayoría de los sitios web utilizan imágenes estáticas como fondo, el cual se puede mostrar en un solo lugar en la pantalla o repetirse horizontalmente, verticalmente o como mosaico. Sin embargo, también puedes hacer un tramo de fondo. Este truco es muy útil cuando quieres diseñar una gráfica de gran tamaño para utilizarla como fondo de tu sitio web. Sin embargo, agregar un fondo extendido a una página web tiene algo de trabajo extra. Debes editar el código HTML, así como el código CSS (Cascading Style Sheets).

Nivel de dificultad:
Moderado

Otras personas están leyendo

Instrucciones

  1. 1

    Abre la hoja de estilo de tu página web en el Bloc de notas o en un editor de código. Encuentra la regla de estilo body:

    body { }

  2. 2

    Agrega una altura de 100 por ciento al cuerpo dentro de tu regla de estilo. También debes darle al cuerpo y al relleno un margen de cero píxeles:

    body { height: 100%; margin: 0; padding: 0; }

  3. 3

    Crea una nueva regla de estilo para un nombre de ID "background" e indica el ancho y la altura del 100 por ciento:

    background {

    width: 100%; height: 100%; }

  4. 4

    Da a la regla de fondo una posición fija en cero píxeles desde la parte superior y desde borde izquierdo de la pantalla del navegador:

    background {

    width: 100%; height: 100%; position: fixed; top: 0; left: 0; }

  5. 5

    Agrega una regla de estilo para el contenido de tu página Web. Esta regla de estilo necesita una posición relativa y un valor “z-index” de uno o más para lograr que el contenido se mantenga en la cima del fondo o background:

    content {

    position: relative; z-index: 1; }

    Si el código CSS contiene otra propiedad "z-index" , asegúrate de que el valor que le des al contenido sea inferior a todo lo que necesites para mostrar en la parte superior del mismo.

  6. 6

    Abre la página web en un editor y agrega un par de etiquetas "<div>" en todo el contenido. Da a las etiquetas el nombre de ID de "content":

    <div id=”content”> Contenido de la página aquí. </div>

  7. 7

    Agrega una imagen encima del contenido de las etiquetas "<div>" y asígnale el ID "background". Establece el atributo "src" con la ruta y el nombre del archivo de la imagen de fondo que desees:

    <img src=”path/to/background.png” id=”background” />

Consejos y advertencias

  • Elimina la línea de la regla de estilo de fondo "height: 100%;", si sólo deseas que el fondo se estire horizontalmente.
  • En el diseño de una imagen de fondo que desees estirar por la pantalla ten en cuenta que los tamaños de pantalla varían ampliamente y distorsionarán tu imagen.

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles