JavaScript Tutorials

background image: document.body.style.background

document.body.style.background specifies the web page's background, which can be either a solid color, or a background image. To modify the page background, you can update the value of document.body.style.background as shown in the examples below.

Code:

<script type="text/javascript">
//<![CDATA[
function bgChange(bg)
{
document.body.style.background=bg;
}
//]]>
</script>

<b>Click on a square to change the background:</b>

<table width="400" height="100" border="2">
 <tr>
  <td width="100" background="../images/background_tile1.jpg"
      onclick="bgChange('url(../images/background_tile1.jpg)')"></td>
  <td width="100" background="../images/background_tile2.jpg"
      onclick="bgChange('url(../images/background_tile2.jpg)')"></td>
  <td width="100" background="../images/background_tile3.jpg"
      onclick="bgChange('url(../images/background_tile3.jpg)')"></td>
  <td width="100" bgcolor="white" align="center"
      onclick="bgChange('white')"><div class="fine-print">(white background)</div></td>
</tr>
</table>

Output:

Click on a square to change the background:

(white background)