Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to set background color in HTML?
Setting the background color in HTML allows you to customize the appearance of your web page and create visually appealing layouts. In modern HTML5, background colors are set using CSS, either through inline styles or external stylesheets.
Syntax
Following is the basic syntax to set background color using the CSS background-color property −
<body style="background-color: colorname;">
Alternatively, you can use CSS in the <head> section −
body {
background-color: colorname;
}
Note − The bgcolor attribute was deprecated in HTML5. Always use the CSS background-color property instead.
Setting Background Color with Color Names
You can specify background colors using predefined color names. HTML supports 140 standard color names including common colors like red, blue, green, yellow, and many others.
Example
Following example demonstrates setting background color using color names −
<!DOCTYPE html> <html> <head> <title>Background Color with Names</title> </head> <body style="background-color: aquamarine; font-family: Arial, sans-serif; padding: 20px;"> <h1>HTML Articles</h1> <p>This page has an aquamarine background color.</p> </body> </html>
The output displays a page with aquamarine background −
HTML Articles This page has an aquamarine background color. (Page displays with light blue-green background)
Example − Different Color Names
Following example shows various color names you can use −
<!DOCTYPE html>
<html>
<head>
<title>Various Background Colors</title>
</head>
<body style="background-color: khaki; font-family: Arial, sans-serif; padding: 20px;">
<h1>HTML Tutorials</h1>
<p>Popular background colors include:</p>
<ul>
<li>lightblue</li>
<li>lightgray</li>
<li>lavender</li>
<li>khaki (used here)</li>
</ul>
</body>
</html>
The output shows a page with khaki (yellowish-brown) background −
HTML Tutorials Popular background colors include: ? lightblue ? lightgray ? lavender ? khaki (used here) (Page displays with khaki background)
Setting Background Color with RGB Values
RGB (Red, Green, Blue) values allow precise color control. Each color component ranges from 0 to 255, where 0 means no intensity and 255 means full intensity.
Example − RGB Values
Following example demonstrates using RGB values for background color −
<!DOCTYPE html>
<html>
<head>
<title>RGB Background Color</title>
<style>
body {
background-color: rgb(240, 248, 255);
font-family: Arial, sans-serif;
padding: 20px;
}
</style>
</head>
<body>
<h1>RGB Color Example</h1>
<p>This background uses RGB(240, 248, 255) which creates a very light blue color.</p>
<p>RGB breakdown: Red=240, Green=248, Blue=255</p>
</body>
</html>
The output displays a page with a very light blue background −
RGB Color Example This background uses RGB(240, 248, 255) which creates a very light blue color. RGB breakdown: Red=240, Green=248, Blue=255 (Page displays with very light blue background)
Setting Background Color with Hexadecimal Values
Hexadecimal color codes use a 6-digit format: #RRGGBB, where RR, GG, and BB represent red, green, and blue values in hexadecimal (00 to FF).
Example − Hexadecimal Colors
Following example shows how to use hexadecimal color codes −
<!DOCTYPE html>
<html>
<head>
<title>Hexadecimal Background Colors</title>
</head>
<body style="background-color: #f0f8ff; font-family: Arial, sans-serif; padding: 20px;">
<h1 style="color: #333;">Hexadecimal Color Example</h1>
<p>This background uses #f0f8ff (Alice Blue).</p>
<div style="background-color: #ffffe0; padding: 10px; margin: 10px 0; border-radius: 5px;">
<p>This div has background color #ffffe0 (Light Yellow).</p>
</div>
</body>
</html>
The output shows different elements with hexadecimal background colors −
Hexadecimal Color Example
This background uses #f0f8ff (Alice Blue).
This div has background color #ffffe0 (Light Yellow).
(Div shows with light yellow background)
(Page displays with Alice Blue background)
Setting Background Color for Specific Elements
You can set background colors for individual HTML elements, not just the entire page. This is useful for highlighting content or creating visual sections.
Example − Element-Specific Backgrounds
Following example shows how to apply background colors to different elements −
<!DOCTYPE html>
<html>
<head>
<title>Element Background Colors</title>
</head>
<body style="background-color: #f5f5f5; font-family: Arial, sans-serif; padding: 20px;">
<h1 style="background-color: #4CAF50; color: white; padding: 10px; text-align: center;">
Main Heading
</h1>
<p style="background-color: #e7f3ff; padding: 15px; border-left: 4px solid #2196f3;">
This paragraph has a light blue background with a blue left border.
</p>
<div style="background-color: #fff3cd; padding: 10px; border-radius: 5px; margin: 10px 0;">
<strong>Warning:</strong> This is a warning message with yellow background.
</div>
</body>
</html>
The output shows different elements with distinct background colors −
Main Heading
(Green background, white text, centered)
This paragraph has a light blue background with a blue left border.
(Light blue background with blue left border)
Warning: This is a warning message with yellow background.
(Light yellow background, rounded corners)
(Overall page has light gray background)
Color Format Comparison
Following table compares the different methods of specifying background colors −
| Method | Example | Advantages | Use Case |
|---|---|---|---|
| Color Names | background-color: red; |
Easy to remember, readable | Quick prototyping, basic colors |
| RGB Values | background-color: rgb(255, 0, 0); |
Precise control, intuitive | Custom colors, programmatic generation |
| Hexadecimal | background-color: #ff0000; |
Compact, web standard | Professional design, color tools |
Conclusion
HTML background colors are set using the CSS background-color property with color names, RGB values, or hexadecimal codes. This approach provides flexibility to style entire pages or individual elements, creating visually appealing and organized web layouts. Always use CSS instead of the deprecated bgcolor attribute for HTML5 compatibility.
245K+ Views
