HTML back­grounds can be created with color values or an image file. Choosing the right back­ground can enhance the design of your website while also ensuring that your content remains clear and easy to read.

What are HTML back­grounds?

The area behind the content of a web page is referred to as the HTML back­ground. These back­grounds can be set when creating a page in HTML. They can also be modified later as needed. By default, HTML back­grounds are white. Changing this is not only rec­om­mend­ed as a way to enhance the design of a website, but also to improve the vis­i­bil­i­ty of the content.

Web Hosting
Hosting that scales with your ambitions
  • Stay online with 99.99% uptime and robust security
  • Add per­for­mance with a click as traffic grows
  • Includes free domain, SSL, email, and 24/7 support

How can an HTML back­ground be changed?

There are two main ways to design HTML back­grounds:

  • by applying a color value
  • by using an image or a gradient

These values are set through the HTML attribute style. In the next sections, we’ll walk you through both methods.

Tip

You can find out more about the pos­si­bil­i­ties of the HTML style tag in our article on the subject.

Defining HTML back­grounds by color value

To change the color of an HTML back­ground, use the style attribute and the background-color or bgcolor property. There are three different options for spec­i­fy­ing the color value:

  • Color name: You have the option to set the desired color by simply using its name. In addition to standard colors like red, yellow, or green, special colors like lightblue or deepskyblue are also possible. Case sen­si­tiv­i­ty does not matter when spec­i­fy­ing the color.
  • Hex color code: You can also specify colors using their six-digit hexa­dec­i­mal number. This consists of three pairs made up of the digits 0 to 9 and the letters a to f. The first pair rep­re­sents the red value, the second rep­re­sents green, and the third rep­re­sents blue, with 00 being the lowest value and ff the highest. For example, blue would be 0000ff.
  • RGB value: Al­ter­na­tive­ly, you can use the RGB value, which is also the basis for the hex color code. The values range from 0 to 255 and cor­re­spond to the colors red, green and blue. For example, blue would be RGB (0, 0, 255).

The syntax you use to define the desired color for your HTML back­grounds looks like this:

<body style="background-color: value;">
html

In the following example, we use a hex color code to specify light blue as the back­ground color:

<!DOCTYPE html>
<html lang="en">
<head>
<title>background-example</title>
</head>
<body>
<div style="background-color: #BFEFFF;">
<h1>Here’s your heading</h1>
<p>
Here’s your website content.
</p>
</div>
</body>
</html>
html

This is what it looks like:

Image: HMTL background: Color example
Sample HTML back­ground with the hex code “#BFEFFF”.

If needed, you can also define colors for HTML back­grounds sep­a­rate­ly for in­di­vid­ual sections of your web pages. This is done using the style attribute and the background-color property. You can see how this works in the following example, where different colors have been set for the overall back­ground, as well as for the back­grounds of <h2> headings and <p> text sections:

<!DOCTYPE html>
<html lang="en">
<head>
<title>background-example</title>
<style>
body {background-color: #BFEFFF;}
h2 {background-color: #1E90FF;}
p {background-color: #00CED1;}
</style>
</head>
<body>
<h2>The background of this headline is set to DodgerBlue.</h2>
<p>This background is set to DarkTurquoise.</p>
</body>
</html>
html
Image: Example: Three different colored HTML backgrounds
Example of an HTML back­ground with three different colors.

Setting images as HTML back­grounds

To be able to use images or graphics as HTML back­grounds, they must be saved in the JPG, PNG, SVG, WebP or GIF image formats. The following example shows the ap­pro­pri­ate code for in­te­grat­ing an image as a back­ground. The path to the image must be adjusted in­di­vid­u­al­ly:

<!DOCTYPE html>
<html lang="en">
<head>
<title>background-example</title>
<style>
	body { background-image: url('/user/folder/assets/background/img/image.svg');	background-size: cover;}
</style>
</head>
<body>
<div style="background-color: rgba(255, 255, 255, 0.8);">
<h1>Here’s your heading</h1>
<p>
Here’s your website content.
</p>
</div>
</body>
</html>
html

When using an image, you should always keep the leg­i­bil­i­ty of the content in mind. By spec­i­fy­ing ad­di­tion­al pa­ra­me­ters, you can adjust the po­si­tion­ing of the image or graphic in order to ensure the text is dis­tin­guish­able from the back­ground.

Domain Name Reg­is­tra­tion
Build your brand on a great domain
  • Free Wildcard SSL for safer data transfers 
  • Free private reg­is­tra­tion for more privacy
  • Free Domain Connect for easy DNS setup
Go to Main Menu