Build Shit in CSS

  1. Introduction
  2. Blocks, Inlines, and Display
  3. Selectors
  4. Box Model
  5. Floating+Clearing I
  6. Floating+Clearing II
  7. Centering
  8. Positioning
  9. Vertical Centering and Radius
  10. Z-Index
  11. :before and :after
  12. Columns
  13. Image Grids
  14. Say No To Bootstrap
  15. The Baseline
  16. Forms
  17. Tables
  18. Background Image
  19. More Transforms
  20. Other Resources I like

Background Image

Take a look at the MDN page for background-image, and use this picture of a Husky: http://whatisjasongoldstein.github.io/buildcss/img/husky.jpg.

The image is square, but the boxes we're using it as a background on are not. (You can tell this where the orange background-color shows through.)

Going left to right, do this:

  1. The image should cover the box (hint: background-size: cover) and be positioned so the tops align.
  2. The image should be contained entirely within the box and centered horizontally. (background-size:contain).
    • Did the image start tiling when there's extra space? Try playing with background-repeat.
  3. The image should be 50% of the box's height and centered (hint: look at background-position).
  4. Cover the box again, but this time, center the image so you can see the Husky's nose.
  5. Tile a stripe of the image (background-repeat), positioned 10px from the top. Make sure never to cut the image, it shouldn't be cut off at the box.
    • Try setting background-size to a percentage to make that happen.
  6. Use background-size and background-position to zoom in.

Special Thanks: The giant fluffy creature shown above is Koda. Because we live in a ridiculous world, you can see more pictures of her on Instagram.