Layers, size, position and repeat
Three layers: the icon, the gradient, and a last layer with no image, only the colour. Each comma-separated value belongs to one layer, in order; 48px alone means 48px wide with an auto height.
Every box can paint a background colour plus any number of image layers, which you size, position and repeat; gradients are images the browser draws for you, in straight lines, circles or around a point.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Make a 300×100 .bar with a left-to-right gradient from #22c55e to #0ea5e9 and a fallback colour #22c55e. Log its computed background-image.
Make a progress pie that is 70% filled using conic-gradient, 120px wide and round. Log its computed border-radius.
Explain it without notes
How do multiple backgrounds stack, and where does the background colour go?
What's the difference between background-size: cover and contain?
Name the three gradient types and a good use for each.
Why might background: url(...) undo a background-color you set earlier?
When should an image be an <img> instead of a CSS background?
Preview
Console
Nothing logged yet.Expected console output
repeat: no-repeat, repeat, repeat
size: 48px auto, auto, auto
colour layer: rgb(79, 70, 229)