in

Learn How to Add HTML Background Colors to web Document

In this tutorial we you will be learning about HTML background colors and how to add them to your web document. Background colors helps to beautify web pages and by default HTML sets the background color of a web page to white.

Read previous tutorial on : Tutorial # 17 Learn How to Build HTML Blocks The Easy Way

What are HTML background colors?

These are colors added to the background of HTML web pages using the HTML color attributes

We can also further beautify our web page by adding background images. Images are suitable for personal blogs but be mindful of the quality and size of the image you make use of because this can affect your web page loading speed and in turn affects your site ranking in site engines. We get to know more about loading speed and site ranking or visibility in site engines in our tutorial on site engine optimization.

How to add background color to a web page

Adding background colors to web pages are very simple to accomplish. We will be needing the style=”background-color: colorname” HTML attribute when placing colors on the web page background. we can also replace the color name with the color hex codes. But editors like vs-code gives us the opportunity to easily use the name of the color. Example shown below

<!DOCTYPE html>
<html>

   <head>
      <title>HTML FRAME ILLUSTRATION</title>
   </head>
	
   <body>
      <div >
            <p style="background-color: brown;">
               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

html background colors

In the above example we added an HTML background color to the first paragraph using the HTML color attribute.

Lets move into adding background colors to the body of the HTML document

Adding background color to HTML Body section

In the below example we will be adding a background color to the body section of the HTML document and we can achieve that by adding the style="background-color: colorname;" to the opening body HTML tag <body> as shown below.

Example

<!DOCTYPE html>
<html>

   <head>
      <title>HTML FRAME ILLUSTRATION</title>
   </head>
	
   <body style="background-color: yellow;">
      <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

html background colors

In the above example the background color was added to the body section of the web page and was set to yellow.

Adding background images to web pages

we can add background images to the body section of web pages by using the background="link to background image" HTML attribute as shown below

<!DOCTYPE html>
<html>

   <head>
      <title>HTML FRAME ILLUSTRATION</title>
   </head >
	
   <body background="C:\Users\DELL XPS\Desktop\develoferd ebooks\develoferd/image.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

html background image example

Adding transparent images to background of Web pages

To add transparent images to the background of web pages we need to make use of a transparent image as the intended image then follow the steps above to add the image to the web page background.

Conclusion

Now you understand the basics of HTML BACKGROUND IMAGES and you are really doing great. Lets move on to the next tutorial on   HTML COLORS

What do you think?

html blocks

Learn How to Build Simple HTML Blocks The Easy Way

html colors

Learn About HTML Colors and How to Use Them On Your Web Page