How to change Background Color in HTML ?
Last Updated :
21 May, 2025
The background color in HTML sets the visual backdrop behind your webpage content. Around 85% of beginner developers start by customizing background colors to enhance design and readability. Using CSS (Cascading Style Sheets), you can easily apply colors through the background-color property. This can be done using color names, hex codes, RGB, or HSL values, and applied to specific elements or the entire page.
1. Using bgcolor attribute
HTML allows you to alter the background color of an element using the bgcolor attribute. However, it’s crucial to note that the bgcolor attribute is considered deprecated in HTML5, and it’s recommended to use CSS for styling purposes instead.
Syntax:
bgcolor="color_name"
Example: Here, we set the background color of the body to light green using the bgcolor attribute.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Background Change</title>
</head>
<body bgcolor="lightgreen">
<h1>
Hello reader my name is sachin
Welcome to GeekforGeeks
</h1>
</body>
</html>
Output:
2. Using Inline CSS
In HTML, you can change the background color of an element using inline styling. This approach involves directly adding the style attribute to the HTML element and specifying the desired background color using the background-color property.
Syntax:
< tag style="background-color: colorname;">..</tag>
Example: Here we are using Inline CSS. Inline CSS directly applies styles to individual HTML elements using the style attribute within the HTML tag
index.html
<!DOCTYPE html>
<html>
<head>
<title>Background Change using Inline CSS Example</title>
</head>
<body style="background-color: greenyellow;">
<h1>Welcome to GeeksforGeeks</h1>
<h2>We are using the Inline CSS</h2>
</body>
</html>
Output:
3. Using Internal CSS
Internal CSS is applied within the <style> tags in the <head> section of an HTML document. This method allows you to set styling rules for specific elements, such as setting the background color.
Syntax:
<style>
Body {
background-color: greenyellow;
}
</style>
Example: Here, the background color is set to greenyellow using internal CSS within the <style> tags in the <head> section.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Internal CSS</title>
<style>
Body {
background-color: greenyellow;
}
</style>
</head>
<body>
<h1>Welcome to GeeksforGeeks</h1>
<h2>We are using the Internal CSS</h2>
</body>
</html>
Output:
4. Using External CSS
In this method, we define style rules in a separate CSS file and link it to an HTML document using the <link> tag. This file contains all the styling information, including background color settings.
Syntax:
body{
background-color: greenyellow;
};Example: In this example we are using External CSS to creating a separate CSS file with styling rules and linking it to an HTML document using the <link> tag. This file contains the background color to target our html element.
index.html
<!DOCTYPE html>
<html>
<head>
<title>inline style attribute</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Welcome to GeeksforGeeks</h1>
<h2>We are using the External CSS</h2>
</body>
</html>
body{
background-color: greenyellow;
}
Output:
Note: Changing the background color of an element in HTML can be achieved through various methods, with CSS being the preferred and more flexible approach. While the bgcolor attribute can be used, it is deprecated in HTML5, and it’s recommended to use CSS instead. Inline CSS, internal CSS, and external CSS offer different levels of control and maintainability, making them suitable for different use cases.