How to Set Background Color with HTML and CSS
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 from 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 <body> element.
Example of setting a background color with the style attribute:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body style="background-color:#1c87c9;">
<h1>Some heading</h1>
<p>Some paragraph for example.</p>
</body>
</html>Result
Some paragraph for example.
Add the CSS background-color property to the <body> element
The background-color property is used to change the background color. 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:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document </title>
<style>
body {
background-color: #1c87c9;
}
</style>
</head>
<body></body>
</html>You can also add a background color 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:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-color: #e6ebef;
}
h2 {
background-color: #8ebf42;
}
p {
background-color: #1c87c9;
}
</style>
</head>
<body>
<h2>Some heading with green background.</h2>
<p>Some paragraph with blue background.</p>
</body>
</html>Let's see another example, where we add a background color with a color name value to the <h1> element. We specify a RGB value for the <h2>, HSL for the <p>, and RGBa value for the <span> element.
Example of setting background colors with different color types:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h1 {
background-color: lightblue;
}
h2 {
background-color: rgb(142, 191, 66);
}
p {
background-color: hsl(300, 100%, 25%);
}
span {
background-color: rgba(255, 127, 80, 0.58);
}
</style>
</head>
<body>
<h1>Example</h1>
<h2>Some heading with green background.</h2>
<p>Some paragraph with blue background.</p>
<span>Some paragraph for</span>
</body>
</html>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:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
#grad {
height: 500px;
background-color: blue;/* For browsers that do not support gradients */
background-image: linear-gradient(to right, #1c87c9, #8ebf42);
}
</style>
</head>
<body>
<h1>Right to Left Linear Gradient background</h1>
<div id="grad"></div>
</body>
</html>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:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
#grad {
height: 500px;
background-color: grey;/* For browsers that do not support gradients */
background-image: radial-gradient(#e6ebef, #1c87c9, #8ebf42);
}
</style>
</head>
<body>
<h1>Radial Gradient Background</h1>
<div id="grad"></div>
</body>
</html>Create a changing background
You can create a background which will change its colors in 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:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
-webkit-animation: colorchange 20s infinite;
animation: colorchange 20s infinite;
}
@-webkit-keyframes colorchange {
0% {
background: #8ebf42;
}
25% {
background: #e6ebef;
}
50% {
background: #1c87c9;
}
75% {
background: #095484;
}
100% {
background: #d0e2bc;
}
}
@keyframes colorchange {
0% {
background: #8ebf42;
}
25% {
background: #e6ebef;
}
50% {
background: #1c87c9;
}
75% {
background: #095484;
}
100% {
background: #d0e2bc;
}
}
</style>
</head>
<body>
<h1>Changing Background</h1>
</body>
</html>The percentages specify the animation length mentioned in "colorchange" (e.g. 20s).