Background Color HTML: How To Add & Change Background Color In HTML, PDF

Background color HTML: In HTML, which stands for HyperText Markup Language, the background color of a particular element can be defined using the ‘background-color’ property. The background-color property in HTML allows a developer to specify the color of the background of the element, which includes div, body, or table.

The background color property accepts a variety of colors, which can be defined using names (named colors), hexadecimal color codes, RGB values, or HSL values.

The background of an element can be defined using three different methods, which are:

Inline style attribute
Internal CSS
External CSS

Table of Contents

Background Color HTML: How to Add Background Color in HTML?

To make the webpage more attractive and fascinating, a user can add magnificent background colors that engage the audience of the web page. Adding a background color in HTML is simple. To add background color in HTML, one must follow certain steps:

1. Choosing Element to add a background color

Go through the HTML document and find the element whose background color should be added. Look for the opening of the associated tags, suppose a person wants to add a background color to the HTML header, look for the <head> tag and its opening. Similarly, as if there is a division of the HTML document, look for the <div> tag.

2. Choose the HTML background color

Choosing the right color for the HTML document is crucial. There are a variety of colors provided in HTML to use. Choose the background color in HTML using the names of the colors or the codes. Certain types of color codes can be used to select the color in HTML. Instead of named colors, hexadecimal color codes, RGB Values, or HSL Values can also be used.

3. Create a style attribute in the element selected

When the selection of the element and color is done, we move forward toward implementing those to add the background color in HTML. In the opening tag of the selected element, add a style attribute. The style attribute will only be applied to the selected element of the webpage.

In the style attribute, add the background-color property, and then add the code of the color or the name of the color that is to be set as the background color in the HTML document.

Also Read: Basic Web Programming: The Beginner’s Guide to Website Development

How to Change Background Color in HTML

The background color in HTML is a crucial thing that must go with the content and other design elements of the existing document. To change the background color in HTML to another color, the steps are mostly similar as they were in adding the background color in HTML.

Follow the mentioned steps to easily change the background color in HTML:

1. Choose the element to change the Background color

Select the element to change the background color. Go to the opening tag of the element and add the background-color property. The tag can also contain a background-color property.

2. Edit the background color

Now that we have created the background-color property in the element we desire. Now, we will be selecting the color of the background and adding it to the color section. If there already exists a color code or name, edit or overwrite the color code or name.

Also Read: Beautify HTML

How to Change a Div Background Color

In HTML, a <div> element is a block-level container used to group together other elements or to create divisions or sections within a web page. The name div stands for division. It is one of the most commonly used elements in HTML for creating layout structures and styling purposes.

Changing the background color of the div is identical to changing the background color of any other element in HTML. We can use different ways to change the background color in HTML for the div element, which includes:

1. Using Inline styling

The <div> element has a style attribute, that is responsible for the definition of the background color as well as the other properties.

<!–Content—>

</div>

The style attribute is used to apply inline CSS styling to the div element, and the background-color property is set to the color.

2. Using internal CSS

To use the internal CSS, we first need to define the class of the div element so that it can be easy to identify which particular div element’s background

color is to be changed.

Now, add a new class selector in the CSS section. Now, within the brackets, include the background-color property. Once we are done with the inclusion of the background property, we will now be able to change the background color easily by entering the color of our choice in the background color section.

.example{

background-color: ‘blue’;

}

Also Read: Body HTML: What Is HTML <body> Tag?

Background Color HTML: Types of Codes

HTML contains millions of colors to use in the form of font color, backgrounds, borders, and many more. The background color in HTML can be accessed in different ways, which include:

1. Hexadecimal Notation:

Hexadecimal color codes are represented by six characters, preceded by a hash (#). Each pair of characters represents the intensity of red, green, and blue colors, which are also known as RGB colors.

2. RGB Functions

RGB color values are defined using the rgb() function. The notation of the RGB function is rgb(R, G, B), where the user can specify the intensity of red, green, and blue colors as decimal values ranging from 0 to 255.

3. RGBA Function

RGBA color values are similar to the RGB values, the only thing that is an increment is the adjustment of the transparency of the color. The functional notation of the RGBA function is rgba(R, G, B, A). The value of alpha ranges from 0 to 1, where 0 stands for completely transparent and 1 stands for completely opaque.

4. Color Names

Instead of using all these codes and the functions for the color in the HTML, one can also use the name of the color. HTML also supports some predefined color names such as blue, red, green, cyan, etc.

Background Color HTML: How to Add Transparency to Color

To add transparency to the HTML background color, there is a function named as the RGBA function. The RGBA function is one of the functions used to access the color in HTML. The RGBA function can be used to add transparency to the background color in HTML.

The functional notation of the RGBA function is rgba (R, G, B, A), where R, G, and B are the intensity of the red, green, and blue, respectively. A stands for alpha, which is the measure of the opaqueness or the transparency of the color. The value of alpha ranges from 0 to 1, depending upon the requirement.

<style>

.transparent {

background-color: rgba(0, 0, 255, 0.5);

}

</style>

In the example above, the value of alpha as 0.5 defines the 50% opacity of the color.

Recommended Technical Course

How to Create an HTML Background Color Gradient

Playing with basic colors is sometimes very safe to play. Let’s indulge in some creativity by using gradient colors as background colors in an HTML document.

The gradient color is one kind of color that most commonly shows one color gradually changing to another color in a certain direction, which includes top to bottom, left to right, or diagonally.

We will be using the liner-gradient() function to implement the gradient colors as our background color in HTML. The functional notation of the liner-gradient () function is ‘linear-gradient (direction or angle, color, color)’, where the direction can be from top to bottom or left to right, the angle can also be defined, and the two colors are the different colors for the transitions.

body {

background-image: linear-gradient (to right, #FFFFFF, rgb(244, 113, 97));

}

In the above example, the linear gradient is used from left to right, from white to orange. This is how a linear gradient is used to change the background color in HTML.

Also Read: Bold HTML: How to Bold, Italicize & Format Text in HTML

Learn Full Stack Web Development with PW Skills

Learn complete HTML, CSS, Bootstrap, JQuery, ReactJS, ExpressJS, PHP, and other important technologies to make yourself job-ready with our Full Stack Web Development Course. Our course is aligned with the latest updated curriculum to make you productive and ready for continuously changing market scenarios.

The course provides you with all the necessary resources such as a free online compiler PW Lab for practice, doubt-solving support, practice exercises, assignments, regular self-assessment, and other perks. Know more only at @pwskills.com

For Latest Tech Related Information, Join Our Official Free Telegram Group : PW Skills Telegram Group

Background Color in HTML FAQs

How do I add background color to HTML?

To add background color in HTML, use the CSS background-color property. Set it to the color name or code you want and place it inside a style attribute. Then add this style attribute to an HTML element, like a table, heading, div, or span tag. Adding a background color can help a certain element stand out on the page, making it more readable.

How to change the bg color in HTML5?

This attribute can be used as inline, internal, or external. The style attribute provides a number of properties that can be used to improve a simple HTML page. The HTML5 doesn’t support the ‘ bgcolor’ attribute of the tag, therefore we need to use the inline style attribute and internal CSS options for changing the color of a web page.

How do I set a background color with an inline style?

This method gives that specific element its unique style declaration. To set a background color with inline style, you’d simply assign the style attribute followed by background-color: inside any of your chosen HTML tags.