Tarea anterior
Fondos13/15
A la lista de tareas
  1. 1. La propiedad background-color
  2. 2. La propiedad background-image
  3. 3. La propiedad background-repeat
  4. 4. La propiedad background-position
  5. 5. Un poco más sobre background-position
  6. 6. La propiedad background-attachment
  7. 7. La propiedad background
  8. 8. Formato JPEG
  9. 9. Formato PNG-8
  10. 10. Formato PNG-24
  11. 11. Formato SVG
  12. 12. Formato GIF
  13. 13. Elementos anidados con fondos
  14. 14. Efectos con fondo repetido
  15. 15. Sprites
Siguiente tarea
  • Cursos
  • Registro
  • Iniciar sesión

Loading…
En unos segundos, estará listo.

  • Teoría
  • Teoría

Elementos anidados con fondos

Si en una página hay varios elementos anidados, las imágenes de fondo de esos bloques se irán superponiendo.

El fondo del bloque exterior quedará más abajo, y los fondos de los elementos internos aparecerán por encima. Cuanto más profundo esté un elemento, más arriba se verá su fondo.

Veamos cómo funciona.

  • index.html
  • style.css
HTML
<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>Elementos anidados con fondos</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="block1"> <div class="block2"> <div class="block3"></div> </div> </div> </body> </html>
CSS
body { padding-top: 80px; } .block1 { width: 256px; margin: 0 auto; box-shadow: 1px 1px 3px #999999; } .block2 { } .block3 { height: 256px; }

El código ha cambiado, haz clic en "Actualizar" o activa la ejecución automática.

Ha ido a otra página

Haga clic dentro del mininavegador para poner el foco en esta ventana.

100%
ObjetivosRealizado
0

    Vamos a armar la mini escena «Gato en la granja». Definan imágenes de fondo sin repetición:

    1. cows.jpg en el primer bloque,
    2. cat_walk.png en el segundo bloque, con la posición de fondo 190px 195px,
    3. fence.png en el tercer bloque.

    © 2023-2026, codigoheroe.com