Previous task
Backgrounds11/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

GIF format

Probably the only reason to use GIF is that it supports animated images.

Anywhere else, use PNG or JPEG.

  • index.html
  • style.css
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>GIF format</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="box box1"> <div class="block block1"></div> </div> <div class="box box2"> <div class="block block2"></div> </div> </body> </html>
CSS
.box { width: 256px; height: 192px; margin: 20px auto; box-shadow: 1px 1px 3px #999999; } .block { height: 192px; background-repeat: no-repeat; background-position: 50% 50%; } .block1 { } .block2 { }

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

    Set the blocks to have non-repeating background images:

    1. cat_purr.gif — for the first block,
    2. cat_walk.gif — for the second block.

    © 2023-2024, codehero.pro