HTML TUTORIAL

Learn How To Add Background Colors To Web Documents Using HTML

HTML BG COLOR
Written by ikenna

In this article, we will be discussing how to add background colors to your web document using HTML and for the purpose of beautification. In our previous tutorial, we looked at the HTML BLOCK elements and we discussed their importance when designing a web document. If you haven’t gone through the previous tutorial, you can do so using the link below

PREVIOUS TUTORIAL: How To Properly Use HTML Blocks On a Web Document

How To Add Background Colors To Web Documents Using HTML

Adding background colors to your web document can help you add more beauty and customization. This is a very important feature and function to web developers. Background colors can be added to web pages using some styling HTML codes. These codes are embedded inside the opening HTML tags as attributes or can be linked using style sheet from an external source or using internal styling.

Adding background color to web pages

To add background color to web pages, we will be needing the style=”background-color: colorname”  structure and also the name of the color we will be willing to use on our page e.g green, red, blue etc. We can also make use of hex color codes and RGB codes.

<!DOCTYPE html>
<html>
   <head>
      <title>HTML FRAME ILLUSTRATION</title>
   </head>
	
   <body>
      <div >
            <p style="background-color: brown;">
               TOP body section showing the colored AREA on the 1ST paragraph
            </p>
            <p>END body section showing the uncolored AREA on the SECOND paragraph</p>
      </div>
   </body>
</html>

results on web browser

HTML FRAME ILLUSTRATION

TOP body section showing the colored AREA on the 1ST paragraph

END body section showing the uncolored AREA on the SECOND paragraph

The above example shows how to add color style to paragraphs and we successfully did it for the first paragraph text only

Adding background color to HTML Body section

We can also add colors to the background of the web page by including the code structure style=”background-color: colorname;” inside the opening body tag. Example shown below

<!DOCTYPE html>
<html>
   <head>
      <title>HTML FRAME ILLUSTRATION</title>
   </head>	
   <body style="background-color: yellow;">
      <div >
            <p >
               TOP body section showing the colored AREA on the 1ST paragraph
            </p>
            <p>END body section showing the uncolored AREA on the SECOND paragraph</p>
      </div>
   </body>
</html>

RESULT ON WEB BROWSER

In the above illustration, the background colour was added to the body area of the web document and was set to yellow.

Using background images on web pages

Instead of using the background color, we can decide to use an image for the background of our web document by using the help of the background="link to background image" HTML attribute. Example shown below

<!DOCTYPE html>
<html>

   <head>
      <title>HTML FRAME ILLUSTRATION</title>
   </head >
   <body background="C:\Users\LENOVO\Desktop\themustfeed\image\themustfeed/bgimage.png">
      <div >
            <p >
               TOP body showing the colored section on the first paragraph
            </p>
            <p>END body showing the uncolored section on the second paragraph</p>
      </div>
   </body>
</html>

RESULT ON WEB BROWSER

Using transparent images as background of Web Documents

To use a transparent image as the background of the web page is very simple. we only need to get a transparent image then link it to the web document using same method shown above.

Conclusion

The above tutorial shows how easily we can use colors on the background of web pages with the help of HTML. If you have any question, kindly let us know using the comment section below

NEXT TUTORIAL: BASIC OF COLORS IN HTML

About the author

ikenna

Leave a Comment