Solved

BODY background image?

Posted on 2003-12-11
14
1,220 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
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
alert(innerHTML); 8 33
html Uncheck Checkbox 2 25
JS Event Does not Trigger From File 2 29
Why is initialize not a function? 8 26
In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
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…

821 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