Summary -

In this topic, we described about the below sections -

Webpage has also a background. By default the web browser color would be white. So it is not as noticeable. The background of webpage can be changed by using HTML. The below are two things can put as a backgrounds for web page.

  1. Colors as Background.
  2. Images as Background.

Let us discuss more in detail about the options.

Color as Background -

Color can be used as a background for HTML element. Background color can be provided by using bgcolor attribute. The bgcolor attribute will come as attribute for HTML elements. The HTML elements are mostly page body and table backgrounds.

Syntax -

<tagname bgcolor= "color-value"…></tagname>

The color-value can be provided in three formats.

  1. color name

    2. <body bgcolor="yellow">

  2. color value

    3. <body bgcolor"#CCCCCC">

  3. RGB value

    4. <body bgcolor="rgb(60,40,60)">

Example -

<!DOCTYPE html>
<html>
<head>
    <title>Colors as Background</title>
</head>
<body>
    <table bgcolor="yellow">
      <tr><td>This background color name as input</td></tr>
    </table>

    <table bgcolor="#CCCCC">
      <tr><td>This background color is hexa decimal value as input</td>
      </tr>
    </table>

    <table bgcolor="rgb(60,40,60)">
      <tr><td>This background color is RGB value as input</td></tr>
    </table>
</body>
</html>

Output -

Background color name as input.
Background color is hexa decimal value as input
Background color is RGB value as input

Image as Background -

Image can be used as a background for HTML element. Background Image can be provided by using background attribute. The background attribute will come as attribute for HTML elements. The HTML elements are mostly page body and table backgrounds.

Syntax -

<tagname background= "image-path/URL"…></tagname>

Image type can be anything, but mostly used types are JPEG,GIF and PNG.

Example -

<!DOCTYPE html>
<html>
<head>
	<title>Image as Background</title>
</head>
<body>
	<table background="img/patterns/textured_stripes.png">
	    <tr><th>Table with background image</th></tr>
	    <tr><td>row1-col1</td><td>row1-col2</td><td>row1-col3</td></tr>
	    <tr><td>row2-col1</td><td>row2-col2</td><td>row2-col3</td></tr>
	    <tr><td>row3-col1</td><td>row3-col2</td><td>row3-col3</td></tr>
	</table>
</body>
</html>

Output -

Table with background image
row1-col1row1-col2row1-col3
row2-col1row2-col2row2-col3
row3-col1row3-col2row3-col3

In the above case, pattern or transparent images can be used as background.