Bird
Raised Fist0
CSSmarkup~5 mins

Background color in CSS

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
Introduction
Background color helps make parts of a webpage look nice and easy to see by adding color behind text or images.
To make a button stand out so users can find it easily.
To highlight a section of a webpage, like a header or footer.
To improve readability by giving contrast behind text.
To match the website's style or brand colors.
To create a mood or feeling with colors on the page.
Syntax
CSS
selector {
  background-color: color-value;
}
Replace selector with the HTML element or class you want to style.
You can use color names, hex codes, rgb(), or other color formats for color-value.
Examples
Sets the whole page background to a light blue color.
CSS
body {
  background-color: lightblue;
}
Gives a bright yellow background to any element with the class 'highlight'.
CSS
.highlight {
  background-color: #ffeb3b;
}
Colors the header background with a tomato red using rgb values.
CSS
header {
  background-color: rgb(255, 99, 71);
}
Sample Program
This webpage uses background colors on the whole page, the header, and a special note box to show how background colors change the look and feel.
CSS
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Background Color Example</title>
  <style>
    body {
      background-color: #f0f8ff;
      font-family: Arial, sans-serif;
      margin: 2rem;
    }
    header {
      background-color: #4caf50;
      color: white;
      padding: 1rem;
      border-radius: 0.5rem;
    }
    .note {
      background-color: #ffeb3b;
      padding: 0.5rem;
      margin-top: 1rem;
      border-radius: 0.3rem;
    }
  </style>
</head>
<body>
  <header>
    <h1>Welcome to My Website</h1>
  </header>
  <p>This page shows how background colors can make things look better.</p>
  <div class="note">This yellow box uses background color to stand out.</div>
</body>
</html>
OutputSuccess
Important Notes
Background color applies behind the content inside an element.
If you want transparent background, use background-color: transparent;.
Use colors with good contrast to keep text easy to read.
Summary
Background color adds color behind elements to improve design and readability.
You set it using the background-color property in CSS.
Use color names, hex codes, or rgb() values to pick your color.

Practice

(1/5)
1. What does the CSS property background-color do?
easy
A. It sets the color behind the content of an element.
B. It changes the text color inside an element.
C. It adds a border around an element.
D. It changes the font style of the text.

Solution

  1. Step 1: Understand the property purpose

    The background-color property sets the color behind the content and padding of an element.

  2. Step 2: Compare with other properties

    Text color is set by color, borders by border, and font style by font-style.

  3. Final Answer:

    It sets the color behind the content of an element. -> Option A

  4. Quick Check:

    Background color = color behind element [OK]
Hint: Background color paints behind content, not text color [OK]
Common Mistakes:
  • Confusing background-color with text color
  • Thinking it changes borders
  • Mixing it with font styling
2. Which of the following is the correct CSS syntax to set a background color to blue?
easy
A. background-color: blue;
B. background: color blue;
C. color-background: blue;
D. bg-color: blue;

Solution

  1. Step 1: Identify correct property name

    The correct CSS property to set background color is background-color.

  2. Step 2: Check syntax format

    The syntax is property: value;, so background-color: blue; is correct.

  3. Final Answer:

    background-color: blue; -> Option A

  4. Quick Check:

    Correct syntax = background-color: value; [OK]
Hint: Use full property name 'background-color' with colon and semicolon [OK]
Common Mistakes:
  • Using incorrect property names like bg-color
  • Swapping property and value order
  • Missing semicolon at end
3. What background color will this CSS produce?
div {
  background-color: #ff0000;
}
medium
A. Green background
B. Blue background
C. Red background
D. No background color

Solution

  1. Step 1: Understand hex color code

    The hex code #ff0000 means full red, zero green, zero blue.

  2. Step 2: Match hex code to color

    This code produces a bright red color as background.

  3. Final Answer:

    Red background -> Option C

  4. Quick Check:

    #ff0000 = red color [OK]
Hint: Hex #ff0000 always means red [OK]
Common Mistakes:
  • Confusing hex codes with other colors
  • Thinking #ff0000 is green or blue
  • Ignoring the # symbol
4. Find the error in this CSS code that tries to set a yellow background:
p {
  background-color = yellow;
}
medium
A. Missing semicolon after yellow
B. Using '=' instead of ':' between property and value
C. Wrong color name, should be 'yellowish'
D. Property name should be 'bg-color'

Solution

  1. Step 1: Check property-value separator

    CSS uses colon ':' to separate property and value, not '='.

  2. Step 2: Verify other syntax parts

    Semicolon is present, color name 'yellow' is valid, property name is correct.

  3. Final Answer:

    Using '=' instead of ':' between property and value -> Option B

  4. Quick Check:

    Property and value separated by ':' [OK]
Hint: Use colon ':' not equal '=' in CSS declarations [OK]
Common Mistakes:
  • Using '=' instead of ':'
  • Wrong color names
  • Changing property names incorrectly
5. You want a webpage section to have a light gray background that adjusts well on all screen sizes. Which CSS snippet is best?
hard
A. section { background-color: gray; padding: 10px; }
B. section { background-color: rgb(211,211,211); width: 100px; }
C. section { background-color: lightgray; height: 100vh; }
D. section { background-color: #d3d3d3; padding: 1rem; }

Solution

  1. Step 1: Choose a light gray color

    Both #d3d3d3 and rgb(211,211,211) represent light gray; color names like 'lightgray' also work.

  2. Step 2: Consider responsive design

    Using padding in rem units scales well on different screens; fixed width or height can cause layout issues.

  3. Step 3: Evaluate each option

    section { background-color: #d3d3d3; padding: 1rem; } uses hex color and rem padding, good for responsiveness. section { background-color: rgb(211,211,211); width: 100px; } fixes width to 100px (not responsive). section { background-color: lightgray; height: 100vh; } uses height 100vh which may cause scrolling issues. section { background-color: gray; padding: 10px; } uses 'gray' which is darker and padding in px (less scalable).

  4. Final Answer:

    section { background-color: #d3d3d3; padding: 1rem; } -> Option D

  5. Quick Check:

    Light gray + responsive padding = section { background-color: #d3d3d3; padding: 1rem; } [OK]
Hint: Use hex or rgb with rem padding for responsive backgrounds [OK]
Common Mistakes:
  • Using fixed pixel sizes hurting responsiveness
  • Choosing too dark colors for light gray
  • Ignoring padding for spacing