HTML - Backgrounds

Quiz

The background of a webpage is a layer behind its content, which includes text, images, colors, and various other elements.

It is an essential part of web design that improves the overall look of a web page as well as the user experience. HTML offers multiple attributes and properties for manipulating the background of elements within a document.

By default, our webpage background is white in color. We may not like it, but no worries. HTML provides the following two good ways to decorate our webpage background:.

HTML Background with Colors
HTML Background with Images

Syntax

The following are the syntaxes for HTML backgrounds:

<body background = value>

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

The value can be an English name of color, an RGB value of color, or a hexadecimal value of color.

Examples of HTML Background

Following are some example codes that show how to set different styles of background for an HTML document.

Setting Color for Background
Setting Image as Background
Background Repeat and Position
Setting Patterned Backgrounds

Setting Color for Background

An elementary method to modify the background is by altering its color. The background-color property facilitates the specification of a color for an element's background. This can be accomplished by incorporating the following style attribute within the opening tag of an HTML element.

Example

The following is an example of setting color for background to a DIV:

<!DOCTYPE html>
<html lang="en">

<head>
   <title>Styled Div Example</title>
</head>

<body>
   <div style="background-color: #3498db; ">
      <h1>Welcome to My Website</h1>
      <p>
         This is an example of a styled div with a 
         background color and text color.
      </p>
      <!-- Additional content goes here -->
   </div>
</body>

</html>

Setting Image as Background

HTML allows us to specify an image as the background of our HTML web page or table. The background and background-image can be used to control the background image of an HTML element, specifically page body and table backgrounds. We simply need to pass the path of an image as a value to both properties as illustrated in the next example. In the below example, the background-image property is assigned to the body of web page.

Example

The following is an example of setting an image as a background color; here we are setting an image to the background of the webage with the <body> tag:

<!DOCTYPE html>
<html lang="en">

<head>
      <title>Background Image Example</title>
</head>

<body background="/market/public/assets/newDesign/img/logo.svg">
   <div style="background-color: rgba(255, 255, 255, 0.8); padding: 20px;">
      <h1>Welcome to My Website</h1>
      <p>
         This is an example of setting a background 
         image using HTML attributes.
      </p>
   </div>
</body>

</html>

Background Repeat and Position

Although you can set an image as the background using just HTML, in order to control it's behavior, like repeating and positioning, we need to use CSS. We recommend watching our CSS background-image for better understanding. CSS offers options for controlling how background images repeat and their positioning. The background-repeat property specifies whether the image should repeat horizontally, vertically, both, or neither. Furthermore, the background-position property empowers developers to determine where the background image should be positioned within the element.

Example

The below HTML program creates a webpage with a centered content div having a repeating vertical background pattern from the specified image. The background color of the container is set to white by default, and the text within the container is styled with a black color, creating a visually appealing and cohesive design.

<!DOCTYPE html>
<html lang="en">

<head>
   <title>HTML Background Repeat</title>
   <style>
      body {
         background-image: 
            url('/market/public/assets/newDesign/img/logo.svg');
         background-repeat: repeat-y;
         background-position: center;
         justify-content: center;
         align-items: center;
         display: flex;
      }
      div{
         background-color: rgba(255, 255, 255, 0.6); 
         padding: 20px;
      }
   </style>
</head>

<body>
   <div>
      <h1>Welcome to My Website</h1>
      <p>
         This is an example of setting a background 
         image using HTML attributes.
      </p>
   </div>
</body>

</html>

Setting Patterned Backgrounds

You might have seen many patterns or transparent backgrounds on various websites. This can simply be achieved by using a patterned image or transparent image in the background. It is suggested that while creating patterns or transparent GIF or PNG images, use the smallest dimensions possible, even as small as 1x1 to avoid slow loading.

Example

Here is an example of how to set the background pattern of a table.

<!DOCTYPE html>
<html>

<head>
   <title>HTML Background Images</title>
</head>

<body>

<!-- Set a table background using pattern -->
<table background = "/images/pattern1.gif" 
         width = "100%" 
         height = "100">
   <tr>
      <td>
         This background is filled up with a pattern image.
      </td>
   </tr>
</table>

<!-- Another example on table background using pattern -->
<table background = "/images/pattern2.gif" 
         width = "100%" 
         height = "100">
   <tr>
      <td>
         This background is filled up with a pattern image.
      </td>
   </tr>
</table>

</body>
   
</html>

Print Page