Chapter 6: Frames and Backgrounds

31 task and 2 challenges

We will learn how to expertly deploy frames and backgrounds of any shape and size, and we will explore the secret uses of long-familiar properties and apply them in practice.

1. Preparation Task

2. Background Size, Step 1 Task

3. Background Size, Step 2 Task

4. Background Borders Task

5. Background Cropping Task

6. Multiple Background Images Task

7. Positioning the background relative to different borders Task

8. background-repeat: round Task

9. background-repeat: space Task

10. Outer Frame Task

11. Rounding Corners, Part 1 Task

12. Rounding Corners, Part 2 Task

13. Frame Image: border-image-source Task

14. Frame Image: border-image-slice Task

15. Slicing Asymmetrical Images Task

16. Frame Image: border-image-repeat, Part 1 Task

17. Frame Image: border-image-repeat, Part 2 Task

18. Frame Image: border-image-width Task

19. Frame Image: border-image-outset Task

20. Muffin’s Royal Frame Task

21. Muffin’s Eco-Frame Task

22. Muffin’s Round Frame, Part 1 Task

23. Muffin’s Round Frame, Part 2 Task

24. Challenge: The Sea Wolf Challenge

25. Frames and Triangles, Part 1 Task

26. Frames and Triangles, Part 2 Task

27. Frames and Triangles, Part 3 Task

28. Creating an Arrow with a Frame Task

29. Creating a Round Arrow with a Frame, Part 1 Task

30. Creating a Round Arrow with a Frame, Part 2 Task

31. Real-Life Triangles, Part 1 Task

32. Real-Life Triangles, Part 2 Task

33. Challenge: Jewelry Work Challenge