Solved

BODY background image?

Posted on 2003-12-11
14
1,219 Views
Last Modified: 2008-02-01
Hi,

The other day I asked how to determine the background color of the document.body.  Thanks to GwynforWeb for her quick answer: http://www.experts-exchange.com/Web/Web_Languages/JavaScript/Q_20821409.html

Now I need to know how to figure out if a background image is attached.  I just can't seem to find the right property.

TIA
0
Comment
Question by:brgivens
  • 5
  • 3
  • 2
  • +2
14 Comments
 
LVL 2

Expert Comment

by:rhawk
ID: 9923991
document.background

0
 
LVL 7

Author Comment

by:brgivens
ID: 9924025
No, that's not it... background isn't a property of the document object.
0
 
LVL 31

Expert Comment

by:GwynforWeb
ID: 9924130
this detects if an image is being used and gives its filename

<script>
if (document.body.background) alert('backgound image is '+document.body.background)
</script>
0
Efficient way to get backups off site to Azure

This user guide provides instructions on how to deploy and configure both a StoneFly Scale Out NAS Enterprise Cloud Drive virtual machine and Veeam Cloud Connect in the Microsoft Azure Cloud.

 
LVL 2

Expert Comment

by:rhawk
ID: 9924144
Sorry... body object....

      <body background="test.gif" bgcolor="#ffffff" onload="alert(document.body.background);">

THat works
0
 
LVL 31

Expert Comment

by:GwynforWeb
ID: 9924238
give the points to rhawk
0
 
LVL 7

Author Comment

by:brgivens
ID: 9924288
What if the background is set this way?

<html>
<head>
<style>
  body{background:url(test.gif)}
</style>
</head>
<body onload="alert(document.body.background);">
</body>
</html>
0
 
LVL 2

Expert Comment

by:rhawk
ID: 9924532
You should be able to test the style then...

document.body.style.backgroundImage

or

document.body.style.background
0
 
LVL 7

Author Comment

by:brgivens
ID: 9924564
That's what I thought, but it doesn't work
0
 
LVL 7

Expert Comment

by:gam3r_3xtr3m3
ID: 9924657
maybe id the body...

<html>
<head>
<style>
body{background:url(test.gif)}
</style>
</head>
<body id="body" onLoad="alert(this.style.backgroundImage);">
<a href="#" onClick="alert(document.getElementById('body').style.backgroundImage);">alert bg!</a>
</body>
0
 
LVL 7

Expert Comment

by:gam3r_3xtr3m3
ID: 9924666
or maybe

<html>
<head>
<style>
body{background:url(test.gif)}
</style>
</head>
<body id="body" onLoad="alert(this.style.background);">
<a href="#" onClick="alert(document.getElementById('body').style.background);">alert bg!</a>
</body>
0
 
LVL 7

Author Comment

by:brgivens
ID: 9924724
That's a creative approach, but it doesn't work... I did try it, but I would've been surprised if it worked since document.body & document.getElementById('body') are the same object.
0
 
LVL 11

Accepted Solution

by:
Zontar earned 250 total points
ID: 9925359
You have to use currentStyle in MSIE and getComputedStyle() in DOM-compliant browsers.

Here's a function I wrote that is cross-browser:

  function getActiveStyle(el, prop)
  {
    var value = null;

    if(el.currentStyle)
    {
      if(prop.indexOf("-") != -1)
      {
        words = prop.split("-");
        prop = words[0];
        for(var i = 1; i < words.length; i++)
          prop += words[i].charAt(0).toUpperCase() + words[i].substr(1);
      }

      value = el.currentStyle[prop];
    }
    else
    {
      if(document.defaultView.getComputedStyle)
        value = document.defaultView.getComputedStyle(el, "").getPropertyValue(prop);
    }

    return value;
  }

  getActiveStyle(document.body, "background-image");

Note: Does not work with positioning properties.
0
 
LVL 7

Author Comment

by:brgivens
ID: 9925414
Zontar,

Thank-you so much!  Your post is extremely informative & certainly expands my knowledge of DOM a great deal... definitely worth more than 50 pts, so I upped it to 250.
0
 
LVL 11

Expert Comment

by:Zontar
ID: 9925489
Hey, thanks. :)
0

Featured Post

Best Practices: Disaster Recovery Testing

Besides backup, any IT division should have a disaster recovery plan. You will find a few tips below relating to the development of such a plan and to what issues one should pay special attention in the course of backup planning.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

773 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question