Skip to main content

CSS Background Color — exercises and bug fixes

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

    Set a background

    easy10 min

    Give #box a #f0f0f0 background.

  2. 2

    Use a translucent background

    easy10 min

    Give #box a black background at 50% opacity.

  3. 3

    Match the text colour

    easy10 min

    Make the #box background follow its text colour, which is red.

  4. 4

    Colour the wrapper

    easy10 min

    Give #wrap a #fffbe6 background.

  5. 5

    Build a readable panel

    medium10 min

    Dark #1a1a1a background with #fafafa text.

Find the bug(5)

  1. 1

    Fix the shorthand that wiped the colour

    easy8 min

    A later background shorthand resets background-color.

  2. 2

    Fix the alpha in a hex colour

    easy8 min

    Use rgba() to get a half-transparent black.

  3. 3

    Fix the misspelled keyword

    easy8 min

    The keyword is currentColor.

  4. 4

    Fix the colour on the wrong element

    easy8 min

    The wrapper should carry the cream background.

  5. 5

    Fix the unreadable pairing

    easy8 min

    Dark text on a dark background cannot be read.

Ready to write the code?

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

Open the workspace