HTML Academy
Previous task
Introduction to Backgrounds1/18
Back to the list of tasks
  • 1. The background-color Property
  • 2. The background-image Property
  • 3. The background-repeat Property
  • 4. The background-position Property
  • 5. A Little More on background-position
  • 6. The background-attachment Property
  • 7. The background Property
  • 8. Summary of “Backgrounds: An Introduction. Part 1”
  • 9. Challenge: Cat Comics
  • 10. JPEG format
  • 11. The PNG-8 Format
  • 12. PNG-24 format
  • 13. The GIF Format
  • 14. Multiple backgrounds
  • 15. Effects with a Repeating Background
  • 16. Sprites
  • 17. Summary of “Backgrounds: An Introduction. Part 2”
  • 18. Challenge: CAT Academy
The background-image Property
  • Sign up
  • Log in

Loading…
Everything will be ready in few seconds

  • Theory
  • Theory
  • Comments

The background-color Property

The background color can be set using the background-color CSS property.

Recall that colors in CSS can be specified in different formats: in hexadecimal (or HEX), RGB, or RGBA as well as using such color constants such as red or green.

You can find out more about colors on the page HTML Colors.

Here is an example of how the property is used:

selector {
  background-color: #ff0000;
}

Comments

  • index.html
  • style.css
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>The background-color Property</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="block block1"></div> <div class="block block2"></div> <div class="block block3"></div> <div class="block block4"></div> </body> </html>
CSS
body { padding: 10px; text-align: center; } .block { display: inline-block; width: 192px; height: 192px; margin: 5px; border-radius: 5px; box-shadow: 1px 1px 3px #999999; } .block1 { } .block2 { } .block3 { } .block4 { }

What didn’t you like in this task?

Thanks! We’ll fix everything at once!

The code has changed, click “Refresh” or turn autorun on.

You’ve gone to a different page

Click inside the mini-browser to shift the focus onto this window.

100%
Goalscompleted
0

    Set the background color:

    1. To the first block – #2ecc71,
    2. To the second block – #3498db,
    3. To the third block – #e74c3c,
    4. To the fourth block – #e67e22.

    Cookies ∙ Privacy ∙ License Agreement ∙ About ∙ Contacts ∙ © HTML Academy OÜ, 2019−2025

    VISAMastercard

    Log in

    or

    Forgot your password?

    Sign up

    Sign up

    or
    Log in

    Restore access

    Have you forgotten your password or lost access to your profile? Enter your email connected to your profile and we will send you a link to restore access.

    Forgot to connect your email to the profile? Email us and we’ll help.