Styla saysControl a background image with background-position, background-size, and background-repeat.
background-size takes cover (fill, may crop), contain (fit, may letterbox), or explicit sizes. background-position places it (center, top right, percentages). background-repeat tiles or not (no-repeat). Together they frame an image inside any box.
Power-ups you unlock
background-size: cover | contain | <length>
background-position places the image
background-repeat: no-repeat stops tiling
cover fills & crops; contain fits & letterboxes
The Specificity Sphinx attacks — common mistakes
cover when you needed the whole image (use contain)
Forgetting no-repeat → unwanted tiling
Position values in the wrong order
Boss battleSet a box background to cover, centered, no-repeat, then switch to contain.