Return to Kroll Web Design home page

JavaScript Tutorials

« Return

background image: document.body.style.background

Click on a square to change the background:


(white 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>


 
« Return


©2012 Kroll Design    info@KrollDesign.net    781.910.3694
Last modified: 12/31/1969 7:00 PM