HTML Background Color | Docs With Examples

Setting the background color of an HTML page or element is an essential aspect of web design. It helps improve readability, highlight important sections, and enhance the overall user experience.

Changing Background Color with CSS

In HTML projects, you can change the background color using the bgcolor attribute (deprecated) or CSS style sheets.

The recommended way to change the background color in HTML is by using inline styles, internal styles, or an external stylesheet.

Setting Background Color for the Whole Page

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <h1>Welcome to My Website</h1>
</body>
</html>

This sets the entire page background to light blue. Open up an HTML editor to see for yourself.

Changing Element Background

You can apply background colors to specific HTML elements like <div>, <p>, and <section>.

<div style="background-color: yellow; padding: 20px;">
    This div has a yellow background.
</div>

Using div class selectors in CSS is a better practice:

.my-box {
    background-color: cyan;
    padding: 20px;
}
<div class="my-box">This div has a cyan background.</div>

Using Named Colors, HEX, & RGB

CSS allows you to define background colors using different formats, including opacity with RGBA.

Named Colors

<p style="background-color: tomato;">This is a paragraph with a tomato background.</p>

HEX Color Codes

<p style="background-color: #ff6347;">This is a paragraph with a HEX color.</p>

RGB & RGBA Color Values

<p style="background-color: rgb(75, 0, 130);">This is a paragraph with an indigo background.</p>
<p style="background-color: rgba(255, 99, 71, 0.5);">This paragraph has 50% opacity.</p>

Common Scenarios

Applying a Gradient Background

CSS provides options for creating gradient-radial and linear gradient backgrounds.

body {
    background: linear-gradient(to right, red, yellow);
}

For a radial gradient:

body {
    background: radial-gradient(circle, cyan, indigo);
}

Transparent Background

If you want an element to have a transparent background:

.transparent-box {
    background-color: rgba(0, 0, 0, 0);
}

<div class="transparent-box">This div has a transparent background.</div>

Changing Background Color with JavaScript

You can dynamically change the body style background color using JavaScript.

<button onclick="document.body.style.backgroundColor = 'pink';">Change Background</button>

Or apply CSS variables for more flexibility:

:root {
    --main-bg: lightgray;
}
body {
    background-color: var(--main-bg);
}

Changing Background Color on Hover

You can make elements change color on hover using CSS.

button:hover {
    background-color: green;
    color: white;
}

<button>Hover over me</button>

Common Questions

What is HTML background color?

The HTML background color defines the color that fills an entire HTML document or a specific HTML element.

How to change the body background color in HTML?

Using CSS, set the background-color property:

body {
    background-color: blue;
}

This sets the background of the element to blue.

How to change HTML background color with JavaScript?

You can use JavaScript to change the background dynamically:

document.body.style.backgroundColor = "yellow";

This changes the background to yellow.

How to change HTML background color using CSS?

You can use inline CSS, an external stylesheet, or internal styles:

body {
    background-color: indigo;
}

Can I use an image as a background instead of a color?

Yes, using the background-image property:

body {
    background-image: url('background.jpg');
    background-size: cover;
}

What is the difference between background and background-color in CSS?

background-color sets a solid color.
background is a shorthand that can include color, image, position, and dimensions.

body {
    background: url('background.jpg') no-repeat center center / cover;
}

How do I change the background color of a table row in HTML?

Use background-color on a <tr> tag:

<tr style="background-color: lightgray;">
    <td>Row with background color</td>
</tr>

Key Takeaways

The background-color property is the best way to change bg colors in HTML.
CSS allows colors to be set using HEX, RGB, RGBA, and HSL values.
JavaScript can dynamically update background colors.
CSS variables offer reusable background color settings.
Gradient-radial and linear gradients enhance visual appeal.
Avoid using the deprecated bgcolor attribute.

Wrapping Up

Changing the HTML background color using CSS enhances the appearance and usability of a webpage. Whether using solid colors, gradients, hover effects, or JavaScript, mastering style sheets and inline styles is a valuable skill for beginners and experienced developers alike. Keep experimenting with different color formats and effects to improve your web design skills!