Skip to main content

Layered Backgrounds — exercises and bug fixes

5 hands-on exercises and 5 find-the-bug challenges for the Layered Backgrounds lesson. Every one is checked automatically in the browser — write the code, run it, and the tests tell you what still fails.

Sign in to start solvingCreate a free account

Exercises(5)

  1. 1

    Stack two gradients

    easy10 min

    Layer a red-to-blue gradient over a green-to-yellow one.

  2. 2

    Repeat each layer differently

    easy10 min

    Two layers: the first not repeating, the second repeating on x.

  3. 3

    Position each layer

    easy10 min

    Put the first layer top-left and the second bottom-right.

  4. 4

    Size each layer

    easy10 min

    Make the first layer 50px by 50px and the second cover the box.

  5. 5

    Compose a layered background

    medium10 min

    Two gradients, each with its own repeat and size.

Find the bug(5)

  1. 1

    Fix the missing second layer

    easy8 min

    Two gradients are needed, separated by a comma.

  2. 2

    Fix the single repeat value

    easy8 min

    One value applies to every layer; each needs its own.

  3. 3

    Fix the swapped positions

    easy8 min

    The first layer belongs top-left.

  4. 4

    Fix the space-separated layers

    easy8 min

    Background layers are separated by commas.

  5. 5

    Fix the reversed sizes

    easy8 min

    The covering layer should be the first one.

Ready to write the code?

The editor, the automatic checks and the worked solutions open up with an account.

Open the workspace