askvity

How Do I Add a Background Color to HTML Using Bgcolor?

Published in HTML Styling 3 mins read

You can add a background color to the entire HTML page using the bgcolor attribute directly within the <body> tag.

Adding a background color to your web page can significantly impact its visual appeal and readability. While modern web development primarily relies on CSS for styling, the HTML bgcolor attribute provides a simple way to set the background color of the main content area, which is represented by the <body> element.

Using the bgcolor Attribute

The bgcolor attribute is placed directly within the opening <body> tag of your HTML document. It accepts color values in a couple of common formats, as supported according to the provided references.

Here's the basic syntax:

<body bgcolor="color_value">
  <!-- Your page content goes here -->
</body>

The color_value can be specified in different ways:

Standard Color Names

You can use pre-defined standard color names like "red", "blue", "green", etc. This is often the easiest method for common colors.

  • Supported Example: <body bgcolor="red">

Hexadecimal Color Codes

For more specific or custom colors, you can use hexadecimal color codes. These codes start with a # followed by six hexadecimal characters (0-9, A-F) representing the Red, Green, and Blue components of the color.

  • Supported Example: <body bgcolor="#FF5733"> (This represents an orange-red color)

Examples in Practice

Here are simple examples demonstrating how to use the bgcolor attribute:

<!DOCTYPE html>
<html>
<head>
  <title>Page with Red Background</title>
</head>
<body bgcolor="red">
  <h1>Welcome to my page!</h1>
  <p>This page has a red background using the bgcolor attribute.</p>
</body>
</html>

And using a hexadecimal code:

<!DOCTYPE html>
<html>
<head>
  <title>Page with Custom Background</title>
</head>
<body bgcolor="#33A1FF">
  <h1>Welcome to my page!</h1>
  <p>This page has a blue background using a hex code with bgcolor.</p>
</body>
</html>

Supported bgcolor Formats

Based on the provided information, the bgcolor attribute supports:

  • Standard color names (e.g., red)
  • Hexadecimal color codes (e.g., #FF5733)
Color Format Example Value How to Use
Standard Color Name blue <body bgcolor="blue">
Hexadecimal Code #FF5733 <body bgcolor="#FF5733">

Alternative: Using CSS (background-color)

While the bgcolor attribute is a direct HTML method, the recommended and modern approach for adding background colors is using CSS with the background-color property. This method offers more flexibility and better separation of content (HTML) and presentation (CSS).

One way to apply CSS directly to the body is using the style attribute:

  • CSS Example: <body style="background-color: blue;">

This CSS method is mentioned as an alternative way to set the background color in the reference provided, highlighting that CSS is the current standard. However, the question specifically asks about bgcolor.

In summary, the bgcolor attribute on the <body> tag is the direct HTML method for adding a background color, supporting both standard color names and hexadecimal codes as specified in the reference.

Related Articles