Lesson 16 – HTML Background Color and Images

admin

In this chapter, we will learn how to change the background color of a webpage or a table row as per our choice. Even, you can also set an image in the background of a webpage. Let’s see how we can do this :

  • HTML background color:

By default the background color of a html page is white. But, you can easily change the background color of a page / table row by using html attribute bgcolor. Syntax used to change the background color is as follows:

 < table bgcolor = “color name”>

or

 <table bgcolor = “#c1c1c2”>

 

HTML background color change example:

Option 1 – Using color name

<!DOCTYPE html>
<html>
<head>
<title> Background Color Change Example</title>
</head>
<body>
<!– Option 1 – Using color name –>

<table bgcolor=”Red” >
  <tr>
    <td>This is Red Background color </td>
  </tr>
</table>
</body>
</html>

The result will be displayed as:

  Background Color Change Example
This is Red Background color

 

Option 2 – Using color hex vale

<!DOCTYPE html>
<html>
<head>
<title> Background Color Change Example</title>
</head>
<body> <!– Option 2 – Using hex value –><table bgcolor=”#e1c1c9″>
<tr>
<td> This is Pink Background color </td>
</tr>
</table>
</body>
</html>

The result will be displayed as:

  Background Color Change Example
This is Pink Background color

  • HTML background image:

Same like above, you can also set an image in the background of a page by using html background attribute. Syntax used to set an image in the background is as follows.

 <table background = “Image destination URL”>

Example of html background image setting

<!DOCTYPE html>
<html>
<head>
<title>Background Image setting example</title>
</head>
<body> <!– Set table background –>
<table background=”http://freetutorialpoint.com/wp-content/uploads/2016/10/images.jpg” width=”200″ height=”200″>
<tr><td> This is table background image</td></tr>
</table>
 
</body>
</html>

The result will be displayed as:

Background Image setting example

This is table background image

 

Chapter Summery:

  • Use html bgcolor attribute to change background color of a html page.
  • Use html background attribute to set image in the background of a html page.

 

Interview Questions:

  • Which html tag is used to change the background color of a table row.

If we will place html bgcolor attribute inside html <table> tag, it will change the background color of a table row. Syntax is as follows

 <table bgcolor = “yellow”>
  •  What is the difference between bgcolor and  background-color.

bgcolor is a html attribute, where as background-color is a CSS style property. Both can be used as alternatively to change the background color of a web page. But however, it’s advisable to use CSS style property background-color  to change the bacground color of a webpage rather than html attribute bgcolor, which is no more used in html 5. 

Practice Exercise:

<!DOCTYPE html>
<html>
<head>
<title> Practice Exercise</title>
</head>
</body> </body>
 </html>

Using above html code,

  • Create a html table, where the color of first row should be green, second row should be red and third row should be brown.

Click here to practice above exercise in real time HTML code editor