Task list
Backgrounds1/14
Back to the list of tasks
  1. 1. Background-color property
  2. 2. Background-image property
  3. 3. Background-repeat property
  4. 4. Background-position property
  5. 5. A little more background-position
  6. 6. Background-attachment property
  7. 7. Background property
  8. 8. JPEG format
  9. 9. PNG-8 format
  10. 10. PNG-24 format
  11. 11. GIF format
  12. 12. Nested elements with backgrounds
  13. 13. Effects with repeating backgrounds
  14. 14. Sprites
Nest task
  • Courses
  • Sign up
  • Log in

Loading...
It will be ready in a few seconds.

  • Theory
  • Theory

Background-color property

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

Here's an example of using the property:

selector {
  background-color: #ff0000;
}

Colors in CSS can be set in different formats: in hexadecimal, in RGB or RGBA, and with color constants such as red or green.

Here are examples of how the red background color is set in different formats:

background-color: red;
background-color: #ff0000;
background-color: rgb(255, 0, 0);
background-color: rgba(255, 0, 0, 0);
  • index.html
  • style.css
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>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 { }

The code has changed, click "Update" or enable autorun.

You have moved to another page

Click inside the mini-browser to highlight this window.

100%
GoalsCompleted
0

    Set background color:

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

    © 2023-2024, codehero.pro