Take a look at the MDN page for
background-image, and use this picture of a Husky:
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:
- The image should
cover the box (hint:
background-size: cover) and be positioned so the tops align.
- The image should be contained entirely within the box and centered horizontally. (
- Did the image start tiling when there's extra space? Try playing with
- The image should be 50% of the box's height and centered (hint: look at
- Cover the box again, but this time, center the image so you can see the Husky's nose.
- 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.
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.