0
0
CSSmarkup~5 mins

Background color in CSS

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
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.