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" 
  <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 = 
      case 2:
        document.getElementById('myTableCell').style.backgroundImage = 
  <table width="250" border="0">
    <td id="myTableCell" style="background-image:URL
      I am a cell with a background image<br /><br />
      If you click one of the buttons, my background will change.

  <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" />

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.


Where to Next?

Wonder where to go next? You can read existing comments below or you can post a comment yourself on this article .

Consider making a donation
Please consider making a donation using PayPal. Your donation helps me to pay the bills so I can keep running Imar.Spaanjaars.Com, providing fresh content as often as possible.

Feedback by Other Visitors of Imar.Spaanjaars.Com

On Wednesday, September 8, 2010 1:24:03 PM Dick Botbyl said:
I found this useful (QuickDocId 282) to change body backgrounds but now I need to know how to save/retrieve a cookie for the desired background.

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 QuickDocId of the document.

For more information about the Talk Back feature, check out this news item.