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

Loading…
En unos segundos, estará listo.

  • Teoría
  • Teoría

Elementos anidados con fondos

Si una página tiene varios elementos anidados unos dentro de otros, las imágenes de fondo de estos bloques se solaparán entre sí.

El fondo de la unidad exterior estará en la parte inferior y los fondos de las unidades interiores estarán en la parte superior. Cuanto más profundo sea el elemento, más alto será su fondo.

Veamos qué aspecto tiene.

  • 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

    Monta una miniatura de un gato en una granja. Coloca imágenes de fondo que no se repitan:

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

    © 2023-2025, codigoheroe.com