- What is the HTML background color code?
- Add the style attribute to the <body> element
- Add the CSS background-color property to the <body> element
- Create a background with gradients
- Create a changing background
- CSS Background Color
What is the HTML background color code?
The first thing you should know is that there are different types of HTML colors, such as Hex color codes, HTML color names, RGB and RGBa values, HSL colors, etc. To choose your preferred color use our Color Tools.
In this snippet, you can find many different ways of adding a background color. Let’s start with the easiest one.
Add the style attribute to the <body> element
You can set a background color for an HTML document by adding
style="background-color:" to the
Example of setting a background color with the style attribute:
Add the CSS background-color property to the <body> element
The backgroundcolor property is used to change the background. Inserting it to the <body> element you will have a full colored cover of the page.
Example of setting a background color with the CSS background-color property:
You can also add a background to specific elements in your document. For example, let’s see how to change the color of the heading and paragraphs.
Example of adding a background color to specific elements:
Let’s see another example, where we add a background color with a name value to the
<h1> element. We specify a RGB value for the
<h2>, HSL for the
<p>, and RGBa value for the
Example of setting background colors with different color types:
Create a background with gradients
Gradient backgrounds let you create smooth transitions between two or more specified colors.
There are two types of gradient backgrounds: linear-gradient and radial-gradient.
In linear-gradient backgrounds, you can set a starting point for the colors. If you don’t mention a starting point, it will automatically set “top to bottom” by default.
Example of setting a linear-gradient background:
The given example shows a linear gradient that starts from the left. It starts from blue, transitioning to green. Change it according to your requirements.
In radial gradient backgrounds, the starting point is defined by its center.
Example of setting a radial-gradient background:
Create a changing background
You can create a background that will change its colors at the mentioned time. For that, add the animation property to the
<body> element. Use the
@keyframes rule to set the background colors through which you’ll flow, as well as the length of time each color will appear on the page.
Example of creating a changing background:
You can change the time and colors to achieve your preferred result.
CSS Background Color
In this tutorial, we’ll cover the basics of adding background colors using CSS to elements with fixed and variable widths. As a bonus, we’ll also demonstrate how to create perfect responsive color squares with just a few lines of code!
In CSS the background is considered to be the width and height of an element, plus any padding and borders (but not margins). Using the CSS background-color property we can color the
<body> background of our HTML page red.
Pretty simple, right! Of course, you could always use an ID or class to give the
<body> element a background color, but this is the easiest method. Next, we’ll look at a couple of techniques to color in CSS the background of in-page elements like a
Fixed-size element background-color
HTML elements that are of a fixed size – whether in pixels, ems or percentages – adding a background color is easy. We can simply use the
CSS code from the previous step to give our
<div> of fixed width and height a blue background.
If we remove either the height or width from the CSS code however, the background color will disappear. Try it for yourself in the demo.
Variable size element background-color
Ok great, but what if we don’t know the size of our
HTML element? As long as there is an element inside the one you want to add a background too, we can use the
CSS padding property to give the outer element some color.
Responsive color squares
This technique uses a combination of positioning and fixed-width with padding to create a perfect responsive square with a background color. You can actually create rectangles of any proportion just by varying the CSS padding-bottom property.
One of the most common things you may have to do as a web developer is to change the background-color of an HTML element. But it may be confusing to do if you do not understand how to use the
CSS background-color property.
In the article, we discuss
- the default background color value of an
- how to change the background color of a div, which is a very common element
- which parts of the
CSSbox model are affected by the background-color property, and
- the different values this property can take.
Default Background Color of an Element
background color of a
div is transparent. So if you do not specify the
background color of a
div, it will display that of its parent element.
Changing the Background Color of a Div
In this example, we will change the
background colors of the following
Without any styling, this will translate to the following visually.
Let’s change the
background color of the divs by adding styles to the classes. You can follow along by trying the examples in an
This will result in the following:
Cool! We have successfully changed the background color of this div. Next, let’s get to know more about this property. Let’s see how the background-color property affects parts of the
Background Color and the CSS Box Model
According to the
CSS box model, all
HTML elements can be modeled as rectangular boxes. Every box is composed of 4 parts as shown in the diagram below.
You can read up on the box model if you are not familiar with it. The question is, which part of the box model is affected when you change the
background color of a
div? The simple answer is the padding area and the content area. Let’s confirm this by using an example.
This will result in:
From the example above, we can see that the margin area and the border area are not affected by the change in
background color. We can change the color of the border using the
border-color property. The margin area remains transparent and reflects the background color of the parent container.
Finally, let’s discuss the values the
background-color property can take.
Just like the color property, the
background-color property can take six different values. Let’s consider the three most common values with an example. In the example, we set the background color of the
div to red with different values.
Notice that they all result in the same background color.
Other values the background-color property can take include HSL value, special keyword values, and global values. Here are examples of each of them.
When setting the background color of an element, it is important to ensure that the contrast ratio of the background and the color of the text it contains is high enough. This is to ensure that people with low vision can easily read the text.
Consider these two divs.
The contrast between the background of the first div and the color of the text is not high enough for everyone to see. So unless you are the only one using the website you are building and you have very good eyesight, you should avoid such color combinations.
The second div has a much better contrast ratio between the background color and the color of the text. Thus, it is more accessible and clearer for people to read.2