How Do I Change the Background of an HTML Element Through Code?

With a little bit of JavaScript, it's easy to change the background image of any object through code. All you need to do is retrieve a reference to the element you want to change, and then set its style.backgroundImage property. 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <title>Change Background</title>
  <script type="text/javascript">
  function ChangeBackground(background)
  {
    switch (background)
    {
      case 1:
        document.getElementById('myTableCell').style.backgroundImage = 
              'URL(/Images/Demos/ChangeBackground/Background1.gif)';
        break;
      case 2:
        document.getElementById('myTableCell').style.backgroundImage = 
               'URL(/Images/Demos/ChangeBackground/Background2.gif)';
        break;
      }
    }
  </script>
</head>
<body>
  <table width="250" border="0">
  <tr>
    <td id="myTableCell" style="background-image:URL
                 (/Images/Demos/ChangeBackground/Background1.gif);">
      I am a cell with a background image<br /><br />
      If you click one of the buttons, my background will change.
    </td>
  </tr>
  </table>

  <form id="frmTest" name="frmTest" action="" method="get">
    <input type="button" id="btnDo1" 
              name="btnDo1" onclick="ChangeBackground(1)" 
              value="Click to change to Background 1" />
    <input type="button" id="btnDo2" 
              name="btnDo2" onclick="ChangeBackground(2)" 
              value="Click to change to Background 2" />
  </form>
</body>
</html>

This code will work in modern, standard compliant browser, like Mozilla, Firefox, and recent versions of Netscape, Opera and Internet Explorer.

This code changes the background image of a table cell, but you can apply this principle to any object that supports the backgroundImage property.

Demo


Where to Next?

Wonder where to go next? You can post a comment on this article.

Doc ID 282
Full URL https://imar.spaanjaars.com/282/how-do-i-change-the-background-of-an-html-element-through-code
Short cut https://imar.spaanjaars.com/282/
Written by Imar Spaanjaars
Date Posted 05/09/2004 14:23
Date Last Reviewed 08/06/2006 15:50
Listened to when writing Giggles by Sonic Youth (Track 17 from the album: Made In USA (soundtrack))

Comments

Talk Back! Comment on Imar.Spaanjaars.Com

I am interested in what you have to say about this article. Feel free to post any comments, remarks or questions you may have about this article. The Talk Back feature is not meant for technical questions that are not directly related to this article. So, a post like "Hey, can you tell me how I can upload files to a MySQL database in PHP?" is likely to be removed. Also spam and unrealistic job offers will be deleted immediately.

When you post a comment, you have to provide your name and the comment. Your e-mail address is optional and you only need to provide it if you want me to contact you. It will not be displayed along with your comment. I got sick and tired of the comment spam I was receiving, so I have protected this page with a simple calculation exercise. This means that if you want to leave a comment, you'll need to complete the calculation before you hit the Post Comment button.

If you want to object to a comment made by another visitor, be sure to contact me and I'll look into it ASAP. Don't forget to mention the page link, or the Doc ID of the document.

(Plain text only; no HTML or code that looks like HTML or XML. In other words, don't use < and >. Also no links allowed.