Background Color: body gbcolor

How to Set background color in HTML?

A typical webpage consists of different elements. These can be submitted buttons, checkboxes, sign up or login buttons, a facility for smooth scrolling, a banner and carousel, and much more.

We use HTML properties and CSS to style all these elements. But even if all the elements look pretty, there needs to be a proper background for the page. This can be an image or just a color.

For this, you need to specify the color you want to the HTML style tag. Or, you might add your desired background color to the CSS stylesheet.

In this article, we will discuss the different aspects of setting the background color to the web page and its various elements.

Adding a background color to page body using the style attribute

You can set the background color to an HTML page body in two ways. You can use the bgcolor property within the body tag. The other method is by using the style attribute. In this process, the style attribute of the body tag is used. This style attribute has a background-color property, which you will use to set the background color of the web page.

The bgcolor property was used earlier, which is now removed from HTML 5.

Setting Background color of the body using bgcolor property (without using CSS):

      
Background colour in HTML
  

Note: bgcolor property removed in HTML 5

Setting Background color of the body using style property (Inline CSS):

     
HTML Backgorund Color
 
Using CSS style.
  

But you have to remember that the style attribute takes precedence over any other style specified for the web page. So, the properties mentioned suing the style attribute will override any style set in the tag or a CSS style sheet.

Setting Background color of the body using CSS

    body 

Adding background color for HTML elements

We will now look at the different ways to add a background color to HTML elements:

Setting background color to Text

To set the required background color to the text on the page, you have to use the color property. You can specify the desired color in the or mention it in the CSS sheet.

For example,

I am red in color.

will work if you are not using a CSS stylesheet.

Otherwise, you can use the following code in CSS:

    p 
STechies.com 

Setting background colour to a , , Tags

Earlier, the bgcolor attribute was used for setting a color to a table. As it is depreciated in HTML 5, you will have to use CSS. For this, use the following CSS code:

    table < background-color: yellow; >th < background-color: blue; >tr  
 
 
Head
 
Head
 
 
Stechies
 
Stechies
 
 
 
  

The same property of background-color can be used for setting the color of table headers, rows, or cells in a table.

Setting background color to tags

You can set the colors of your choice to the div and paragraph elements using HTML or CSS. In HTML, you can use the tag. Use the following code:

    div 
Background color to div Tag
  

Setting background color to form elements like button and textbox

Background color can be set to form elements such as button and textbox using the style tag in HTML. For example,

    input[type=button] < background-color: #4CAF50; >input[type=text] 

Setting background color to form elements like button and textbox using the ID attribute

If you are using CSS, you might set the color easily with the help of an id attribute. You can set the id value of a button or a textbox to anything you like. This id can then be referred to when writing CSS code. For example, if the button has and the textbox has the following CSS code will be applicable,

    #mytextfield < background-color: gray; >#mybutton 

Setting background color to form elements like button and textbox using the class attribute

You can use class attribute the same as ID attribute, but the main difference between ID and the Class attribute is that we can use multiple class in any HTML element, but we have only one ID HTML element.

    .mytextfield < background-color: gray; >.mybutton 

Different ways to define color in the background property

Using Hex color codes

You can specify the background color through hexadecimal color codes. You can mention this within the style tag or using the CSS background-color property.

This will set the background color to Indigo.

Using HTML color names

You can specify the color names in the HTML or CSS document for the web page or element background.

Using RGB color values

RGB values are used to define the amount of red, green, and blue using a number. This number lies between 0 and 255.

The RGB(255,0,0) value will make the background color red. This is because red is set to the highest amount, and the others are set to 0.

Using HSL color values

Another way to add background color is by using HSL values in HTML and CSS. It stands for hue, saturation, and lightness. Hue is the degree of intensity on the color wheel. Here, 0 means red, 240 is blue, and 120 is green. The saturation level is a percentage where 0 % is a shade of grey 100 % is the full color.

A percentage value is used for the lightness that defines the intensity of the color. Here, 0 % is black, and 100 % is white. 50 % is neither light nor dark. Use the code below for HSL values:

Create a Gradient Background

You can create a gradient background for a web page using CSS. There are two ways to go about it:

Background color linear gradient

In this method, the direction of the gradient is mentioned along with the colors. Directions such as to bottom, to top, to the right, to the left, or to the bottom right can be used.

For example,

    body Stechies.com 

You can also use multiple colors together. Instead of directions, you can use angles such as -90deg.

Background color radial gradient

Here, the gradient is defined by its center. You will have to mention at least two colors.

The basic syntax is as follows:

background-image: radial-gradient(shape size at position, start-color, . last-color);

For example,

    body Stechies.com 

Conclusion

The different ways to set background colors are discussed. You can either mention the styles within the HTML document using the tag. You can also use external style sheets for setting the style properties. But make sure the values are correct when you are using hex codes and HSL values.

• Xero vs QuickBooks
• Difference between GSM and CDMA
• AWS vs Azure
• IaaS vs PaaS vs SaaS
• Fibonacci Series Program
• Difference between NSE and BSE
• Difference between FOR and WHILE Loop
• FireCuda vs BarraCuda
• Agile vs Waterfall
• Difference between Structure and Union in C
• Gmail server error #007
• Difference between Router and Switch
• WebP to JPG
• How to Take a Screenshot on Windows 10
• Padding vs Margin
• Variance vs Standard Deviation
• Scrum vs Kanban
• Difference between Microprocessor and Microcontroller
• DDL vs DML
• OLTP vs OLAP

Источник

background-color

The background-color CSS property sets the background color of an element.

Try it

Syntax

/* Keyword values */ background-color: red; background-color: indigo; /* Hexadecimal value */ background-color: #bbff00; /* Fully opaque */ background-color: #bf0; /* Fully opaque shorthand */ background-color: #11ffee00; /* Fully transparent */ background-color: #1fe0; /* Fully transparent shorthand */ background-color: #11ffeeff; /* Fully opaque */ background-color: #1fef; /* Fully opaque shorthand */ /* RGB value */ background-color: rgb(255 255 128); /* Fully opaque */ background-color: rgb(117 190 218 / 0.5); /* 50% transparent */ /* HSL value */ background-color: hsl(50 33% 25%); /* Fully opaque */ background-color: hsl(50 33% 25% / 0.75); /* 75% opaque, i.e. 25% transparent */ /* Special keyword values */ background-color: currentcolor; background-color: transparent; /* Global values */ background-color: inherit; background-color: initial; background-color: revert; background-color: revert-layer; background-color: unset; 

The background-color property is specified as a single value.

Values

The uniform color of the background. It is rendered behind any background-image that is specified, although the color will still be visible through any transparency in the image.

Accessibility concerns

It is important to ensure that the contrast ratio between the background color and the color of the text placed over it is high enough that people experiencing low vision conditions will be able to read the content of the page.

Color contrast ratio is determined by comparing the luminance of the text and background color values. In order to meet current Web Content Accessibility Guidelines (WCAG), a ratio of 4.5:1 is required for text content and 3:1 for larger text such as headings. Large text is defined as 18.66px and bold or larger, or 24px or larger.

Formal definition

Formal syntax

Examples

HTML

div class="exampleone">Lorem ipsum dolor sit amet, consectetuerdiv> div class="exampletwo">Lorem ipsum dolor sit amet, consectetuerdiv> div class="examplethree">Lorem ipsum dolor sit amet, consectetuerdiv> 

CSS

.exampleone  background-color: transparent; > .exampletwo  background-color: rgb(153, 102, 153); color: rgb(255, 255, 204); > .examplethree  background-color: #777799; color: #ffffff; > 

Result

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Jul 18, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник