Skip to main content

CSS Background Image — exercises and bug fixes

5 hands-on exercises and 5 find-the-bug challenges for the CSS Background Image 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

    Add a gradient

    easy10 min

    Give #box a linear gradient from red to blue.

  2. 2

    Set the gradient direction

    easy10 min

    Make the red-to-blue gradient run left to right.

  3. 3

    Use a radial gradient

    easy10 min

    Give #box a circular red-to-blue gradient.

  4. 4

    Stop the tiling

    easy10 min

    Add a gradient and stop the background repeating.

  5. 5

    Cover and centre

    medium10 min

    A no-repeat gradient, sized to cover and centred.

Find the bug(5)

  1. 1

    Fix the missing comma

    easy8 min

    Gradient colour stops are comma separated.

  2. 2

    Fix the direction keyword

    easy8 min

    A gradient direction is written as "to right".

  3. 3

    Fix linear used where radial was meant

    easy8 min

    This gradient should radiate from the centre.

  4. 4

    Fix the repeat value

    easy8 min

    The value is no-repeat.

  5. 5

    Fix the size keyword

    easy8 min

    The value is cover, not covers.

Ready to write the code?

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

Open the workspace