h20 HTML Backgrounds

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 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

Setting Background Color

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

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Styled Div Example</title>
</head>
<body>
   <div style=" color: #4bb354; 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>

In the above example, the background-color property is assigned the hexadecimal color code #3498db, representing a shade of blue. Simultaneously, the color property is utilized to set the text color within the element.

Setting Background Image

HTML allows us to specify an image as the background of our HTML web page or table. The background and background-image are 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 −

Example

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>HTML Background Image</title>
   <style>
      /* Add any additional styles here if needed */
      body {
         margin: 0;
         padding: 0;
      }
      .custom-background {
         background-image: url('tp-background.jpg');
         background-repeat: no-repeat;
         background-position: center;
         /* Add any additional styles for the container here */
         height: 100vh;
         /* Adjust the height as needed */
         display: flex;
         justify-content: center;
         align-items: center;
         color: #000000;
      }
   </style>
</head>
<body>
   <div class="custom-background">
      <!-- Content goes here -->
      <h1>Hello, World!</h1>
      <p>This is an example of a background image.</p>
   </div>
</body>
</html>

In the above example, the background-image property is assigned to the body of web page.

Background Repeat and Position

HTML 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

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>HTML Background Repeat</title>
   <style>
      /* Add any additional styles here if needed */
      body {
         margin: 0;
         padding: 0;
      }
      .custom-background {
         background-image: url('logo.png');
         background-repeat: repeat-y;
         background-position: center;
         /* Add any additional styles for the container here */
         height: 100vh;
         /* Adjust the height as needed */
         display: flex;
         justify-content: center;
         align-items: center;
         color: #000000;
      }
   </style>
</head>
<body>
   <div class="custom-background">
      <!-- Content goes here -->
      <h1>Hello, World!</h1>
      <p>This is an example of a background pattern applied using HTML and CSS.</p>
   </div>
</body>
</html>

The above 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.

Patterned & Transparent Backgrounds

You might have seen many pattern or transparent backgrounds on various websites. This simply can be achieved by using 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 examples to set background pattern of a table −

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Background Images</title>
   </head>
    
   <body>
      <!-- Set a table background using pattern -->
      <table background = "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 = "pattern2.gif" width = "100%" height = "100">
         <tr>
            <td>
               This background is filled up with a pattern image.
            </td>
         </tr>
      </table>
   </body>
   
</html>