Previous task
Backgrounds12/14
Back to the list of tasks
  1. 1. Background-color property
  2. 2. Background-image property
  3. 3. Background-repeat property
  4. 4. Background-position property
  5. 5. A little more background-position
  6. 6. Background-attachment property
  7. 7. Background property
  8. 8. JPEG format
  9. 9. PNG-8 format
  10. 10. PNG-24 format
  11. 11. GIF format
  12. 12. Nested elements with backgrounds
  13. 13. Effects with repeating backgrounds
  14. 14. Sprites
Nest task
  • Courses
  • Sign up
  • Log in

Loading...
It will be ready in a few seconds.

  • Theory
  • Theory

Nested elements with backgrounds

If a page has multiple elements that are nested within each other, the backgrounds of those blocks will overlap each other.

The background of the outer block will be at the very bottom, and the backgrounds of the inner blocks will be at the top. The deeper the element is, the higher its background.

Let's see what this looks like.

  • index.html
  • style.css
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Nested elements with backgrounds</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; }

The code has changed, click "Update" or enable autorun.

You have moved to another page

Click inside the mini-browser to highlight this window.

100%
GoalsCompleted
0

    Assemble a miniature of a cat on a farm. Set up non-repeating background pictures:

    1. cows.jpg — for the first block,
    2. cat_walk.png — for the second block, background position 190px 195px,
    3. fence.png — for the third block.

    © 2023-2024, codehero.pro