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

Syntax

<body background = value>

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

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

Examples of HTML Background

Following are some example code that shows how to set different styles of background for a HTML document.

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.

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

<!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 image as background using just HTML, inorder 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.

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

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 = "/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