HTML back­grounds can be created with colour 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 re­com­men­ded as a way to enhance the design of a website, but also to improve the vis­ib­il­ity of the content.

Web hosting
The hosting your website deserves at an un­beat­able price
  • Loading 3x faster for happier customers
  • Rock-solid 99.99% uptime and advanced pro­tec­tion
  • Only at IONOS: up to 500 GB included

How can an HTML back­ground be changed?

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

  • by applying a colour 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­sib­il­it­ies of the HTML style tag in our article on the subject.

Defining HTML back­grounds by colour value

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

  • Colour name: You have the option to set the desired colour by simply using its name. In addition to standard colours like red, yellow, or green, special colours like lightblue or deepskyblue are also possible. Case sens­it­iv­ity does not matter when spe­cify­ing the colour.
  • Hex color code: You can also specify colours using their six-digit hexa­decim­al number. This consists of three pairs made up of the digits 0 to 9 and the letters a to f. The first pair rep­res­ents the red value, the second rep­res­ents green, and the third rep­res­ents blue, with 00 being the lowest value and ff the highest. For example, blue would be 0000ff.
  • RGB value: Al­tern­at­ively, 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­res­pond to the colours red, green and blue. For example, blue would be RGB (0, 0, 255).

The syntax you use to define the desired colour 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 colour:

<!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: Colour example
Sample HTML back­ground with the hex code ‘#BFEFFF’.

If needed, you can also define colours for HTML back­grounds sep­ar­ately for in­di­vidu­al 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 colours 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 coloured HTML backgrounds
Example of an HTML back­ground with three different colours.

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­teg­rat­ing an image as a back­ground. The path to the image must be adjusted in­di­vidu­ally:

<!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 legib­il­ity of the content in mind. By spe­cify­ing ad­di­tion­al para­met­ers, you can adjust the po­s­i­tion­ing of the image or graphic in order to ensure the text is dis­tin­guish­able from the back­ground.

Register your domain name
Launch your business on the right domain
  • Free WordPress with .co.uk
  • Free website pro­tec­tion with one Wildcard SSL
  • Free Domain Connect for easy DNS setup
Go to Main Menu