4 Replies - 1521 Views - Last Post: 27 September 2009 - 12:07 PM

#1 musya  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 11
  • View blog
  • Posts: 1,012
  • Joined: 25-April 07

Changing background image

Posted 26 September 2009 - 08:00 PM

I've been trying to figure out how to change the background image with javascript, and I've tryed a whole bunch of code this being one of them

var  imageURL = "/images/content/rotator/IMG_2019.jpg";
document.body.style.backgroundImage = "url(" + imageURL + ")";

or

document.body.style.backgroundImage = "/images/content/rotator/IMG_2019.jpg";

or

document.body.background = "/images/content/rotator/IMG_2019.jpg"; 


With using the last one I get 'document.body' is null or not an object, but I do have a <body> tag in my page.

And if I do
if (document.body){
alert("hello");
}


I dont get anything.

How can I get this code to work?

Thank you,
Musya

This post has been edited by musya: 26 September 2009 - 08:06 PM


Is This A Good Question/Topic? 0
  • +

Replies To: Changing background image

#2 BetaWar  Icon User is offline

  • #include "soul.h"
  • member icon

Reputation: 1199
  • View blog
  • Posts: 7,308
  • Joined: 07-September 06

Re: Changing background image

Posted 26 September 2009 - 11:25 PM

I would suggest going about things a bit differently.

Add an ID to your body tag and access it through that.

Then use some code like so:

<script>
function updateBG(){
  ele = document.getElementById("bodyTag");
  ele.style.background = "url("+imageURL+") top left no-repeat transparent";
}
</script>
<body id="bodyTag">
...



That should allow you to modify all the background elements of the CSS.

Hope that helps.
Was This Post Helpful? 0
  • +
  • -

#3 musya  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 11
  • View blog
  • Posts: 1,012
  • Joined: 25-April 07

Re: Changing background image

Posted 27 September 2009 - 10:31 AM

Nope, it says object required at this line
ele.style.background = "url("+imageURL+") top left no-repeat transparent";


Here is my code:
<?php defined( '_JEXEC' ) or die( 'Restricted access' );?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" 
xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/kingdomlivingcc/css/template_css.css" type="text/css" />

<script type="text/javascript">
var imageURL = "/images/content/rotator/IMG_2019.jpg";
ele = document.getElementById("bodyTag");
ele.style.background = "url("+imageURL+") top left no-repeat transparent";


</script>
</head>

<body id="bodyTag">


</body>
</html>



the css for body is simple
body {
font-family: Arial;
font-size: 12pt;
color: #cccccc;
background-color:#000000;
padding:0px;
margin:0px;
width:100%;
height:100%;
}


some of things probably aren't necessary but I was just trying different things.
Was This Post Helpful? 0
  • +
  • -

#4 BetaWar  Icon User is offline

  • #include "soul.h"
  • member icon

Reputation: 1199
  • View blog
  • Posts: 7,308
  • Joined: 07-September 06

Re: Changing background image

Posted 27 September 2009 - 11:29 AM

Aha! Okay, the problem is that you have the script before you have the body tags, so it tries to run the script as soon as it is loaded, and you don't have the body object loaded yet - thus the error.

You can use a number of different ways to get it to work - the easiest being put the script after the body tag. One of the more common ways you will see is using jQuery (or my library - jBeta).

If you use jBeta it is pretty simple to do:
<script type="text/javascript" src="jBeta_v1.0.1b.js"></script>
  <script>
	// when the page DOM has completed loading
	jBeta.ready(function(){
	  var imageURL = "/images/content/rotator/IMG_2019.jpg";
	  ele = document.getElementById("bodyTag");
	  ele.style.background = "url("+imageURL+") top left no-repeat transparent";
	});
  </script>


Hope that helps.
Was This Post Helpful? 0
  • +
  • -

#5 musya  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 11
  • View blog
  • Posts: 1,012
  • Joined: 25-April 07

Re: Changing background image

Posted 27 September 2009 - 12:07 PM

Totally worked dude, sorry I missed that I put the code in a function and did an onload on the body to call the function. Well Now I got to make this into a rotator :D.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1