Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

BODY background image?

Posted on 2003-12-11
14
Medium Priority
?
1,226 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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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 1000 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

Tech or Treat!

Submit an article about your scariest tech experience—and the solution—and you’ll be automatically entered to win one of 4 fantastic tech gadgets.

Question has a verified solution.

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

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
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…

636 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