Solved

BODY background image?

Posted on 2003-12-11
14
1,217 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
Comment Utility
document.background

0
 
LVL 7

Author Comment

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

Expert Comment

by:GwynforWeb
Comment Utility
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
 
LVL 2

Expert Comment

by:rhawk
Comment Utility
Sorry... body object....

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

THat works
0
 
LVL 31

Expert Comment

by:GwynforWeb
Comment Utility
give the points to rhawk
0
 
LVL 7

Author Comment

by:brgivens
Comment Utility
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
Comment Utility
You should be able to test the style then...

document.body.style.backgroundImage

or

document.body.style.background
0
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 
LVL 7

Author Comment

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

Expert Comment

by:gam3r_3xtr3m3
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
Hey, thanks. :)
0

Featured Post

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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…

728 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now