Solved

BODY background image?

Posted on 2003-12-11
14
1,223 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Transaction Monitoring Vs. Real User Monitoring

Synthetic Transaction Monitoring Vs. Real User Monitoring: When To Use Each Approach? In this article, we will discuss two major monitoring approaches: Synthetic Transaction and Real User Monitoring.

 
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

Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

Question has a verified solution.

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

This article discusses how to create an extensible mechanism for linked drop downs.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…

687 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