# How to customize HTML backgrounds with colors or images 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](https://www.ionos.com/digitalguide/websites/web-development/what-is-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. ## 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](https://www.ionos.com/digitalguide/websites/web-development/html-attributes/) `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](https://www.ionos.com/digitalguide/websites/web-development/html-tag-style/) 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: ```html ``` In the following example, we use a hex color code to specify light blue as the background color: ```html background-example

Here’s your heading

Here’s your website content.

``` This is what it looks like: [![Image: HMTL background: Color example](https://www.ionos.com/digitalguide/fileadmin/_processed_/1/5/csm_html-color-background-example_fa19e51324.webp "HMTL background: Color example")](https://www.ionos.com/digitalguide/fileadmin/DigitalGuide/Screenshots_2024/html-color-background-example.png) 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 `

` headings and `

` text sections: ```html background-example

The background of this headline is set to DodgerBlue.

This background is set to DarkTurquoise.

``` [![Image: Example: Three different colored HTML backgrounds](https://www.ionos.com/digitalguide/fileadmin/_processed_/b/1/csm_html-background-example-2_a5a13bd28c.webp "Example: Three different colored HTML backgrounds")](https://www.ionos.com/digitalguide/fileadmin/DigitalGuide/Screenshots_2024/html-background-example-2.png) 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](https://www.ionos.com/digitalguide/websites/web-design/image-file-format-types/). The following example shows the appropriate code for integrating an image as a background. The path to the image must be adjusted individually: ```html background-example

Here’s your heading

Here’s your website content.

``` 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. This is a markdown version of: [https://www.ionos.com/digitalguide/websites/web-development/html-backgrounds/](https://www.ionos.com/digitalguide/websites/web-development/html-backgrounds/) for AI/LLM consumption.