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

What are HTML backgrounds?

The area behind the content of a web page is referred to as the HTML background. These backgrounds can be set when creating a page in HTML. They can also be modified later as needed. By default, HTML backgrounds are white. Changing this is not only recommended as a way to enhance the design of a website, but also to improve the visibility of the content.

Web Hosting
Fast, scalable hosting for any website
  • 99.9% uptime
  • PHP 8.3 with JIT compiler
  • SSL, DDoS protection, and backups

How can an HTML background be changed?

There are two main ways to design HTML backgrounds:

  • 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 possibilities of the HTML style tag in our article on the subject.

Defining HTML backgrounds by color value

To change the color of an HTML background, use the style attribute and the background-color or bgcolor property. There are three different options for specifying 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 sensitivity does not matter when specifying the color.
  • Hex color code: You can also specify colors using their six-digit hexadecimal number. This consists of three pairs made up of the digits 0 to 9 and the letters a to f. The first pair represents the red value, the second represents green, and the third represents blue, with 00 being the lowest value and ff the highest. For example, blue would be 0000ff.
  • RGB value: Alternatively, you can use the RGB value, which is also the basis for the hex color code. The values range from 0 to 255 and correspond 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 backgrounds 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 background 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 background with the hex code “#BFEFFF”.

If needed, you can also define colors for HTML backgrounds separately for individual 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 background, as well as for the backgrounds 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 background with three different colors.

Setting images as HTML backgrounds

To be able to use images or graphics as HTML backgrounds, they must be saved in the JPG, PNG, SVG, WebP or GIF image formats. The following example shows the appropriate code for integrating an image as a background. The path to the image must be adjusted individually:

<!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 legibility of the content in mind. By specifying additional parameters, you can adjust the positioning of the image or graphic in order to ensure the text is distinguishable from the background.

Domain Name Registration
Build your brand on a great domain
  • Free Wildcard SSL for safer data transfers
  • Free private registration for more privacy
  • Free 2 GB email account
Was this article helpful?
Go to Main Menu