Background Colors In Html

4 min read Jun 28, 2024

Background Colors in HTML

Background colors in HTML are used to change the color of the background of an element. This can be used to create visually appealing web pages and to improve the readability of text.

How to Use Background Colors in HTML

There are two main ways to set background colors in HTML:

1. Using the bgcolor attribute:

The bgcolor attribute can be used to set the background color of an element directly. This attribute is deprecated in HTML5, but it still works in some browsers.

Example:


  This is a heading
  This is a paragraph.

2. Using the style attribute:

The style attribute can be used to set the background color of an element using CSS. This is the preferred method in modern HTML.

Example:


  This is a heading
  This is a paragraph.

Using CSS for Background Colors

The background-color property in CSS is used to set the background color of an element. It can be used with different CSS selectors, such as element selectors, class selectors, and ID selectors.

Example:




  This is a heading
  This is a paragraph.

In this example, the body element will have a light blue background color, and the h1 element will have a yellow background color.

Color Values

You can use various color values to set background colors:

Color Names: Use common color names like red, blue, green, black, white, etc.
Hex Codes: Use hexadecimal color codes like #FF0000 for red.
RGB Values: Use RGB values like rgb(255, 0, 0) for red.
HSL Values: Use HSL values like hsl(0, 100%, 50%) for red.

Other Background Properties

In addition to the background-color property, you can also use other background properties in CSS to style the background of an element, such as:

background-image: Sets a background image.
background-repeat: Controls how the background image is repeated.
background-size: Sets the size of the background image.
background-position: Sets the position of the background image.
background-attachment: Sets whether the background image is fixed or scrolls with the page.

By understanding and using these properties, you can create visually appealing and functional web pages.

Background Colors In Html