1,105,406 Community Members

Google like background change

Member Avatar
george61
Junior Poster in Training
59 posts since Jul 2010
Reputation Points: 0 [?]
Q&As Helped to Solve: 6 [?]
Skill Endorsements: 0 [?]
 
0
 

I'm working on a site and I want to give the users option to change the background image.
Of course client-side. My default background-image is put in CSS file.

body {
 background-image: url(images/back.jpg);
 overflow: visible;
 width: 1260px;
 }

I've tried to make some javascript trigering the change

var img = "images/backy.jpg"
function cng(){
if(document.body){
document.getElementsByTagName("BODY").style.background = img;
}
}

It won't work

var img = "images/backy.jpg"
function cng(){
if(document.body){
document.body.background = img;
}
}

Also won't work
The HTML is:

<p class="cng" onclick="cng()"><b>Change background</b></p>

document.write isn't solution. Another important thing is that the image have to be user specified(the user is selecting image from his computer like in uploading file).

Member Avatar
Chokladkakan
Newbie Poster
13 posts since Jul 2010
Reputation Points: 0 [?]
Q&As Helped to Solve: 2 [?]
Skill Endorsements: 0 [?]
 
0
 

Try document.getElementsByTagName("BODY").style.backgroundImage = img; instead.

Member Avatar
george61
Junior Poster in Training
59 posts since Jul 2010
Reputation Points: 0 [?]
Q&As Helped to Solve: 6 [?]
Skill Endorsements: 0 [?]
 
0
 

Still won't work maybe there would be solution for directly modifiyng the CSS file.

Member Avatar
Chokladkakan
Newbie Poster
13 posts since Jul 2010
Reputation Points: 0 [?]
Q&As Helped to Solve: 2 [?]
Skill Endorsements: 0 [?]
 
0
 

Well, I know document.getElementsByTagName("BODY").style.backgroundImage = "url(link)"; would work. Perhaps you could work form there on? I am afraid I don't know how to manage the uploading of an image and all that.

Member Avatar
Taywin
Posting Maven
2,632 posts since Apr 2010
Reputation Points: 134 [?]
Q&As Helped to Solve: 378 [?]
Skill Endorsements: 17 [?]
 
0
 

Not sure you would get only 1 'body' from your tag (may get an array with 1 element). Shouldn't you use document.getElementsByTagName("BODY")[0].style.backgroundImage = img ??? Also, not sure if the image would be shown if it is not loaded yet. You may need CSS for it.

Member Avatar
george61
Junior Poster in Training
59 posts since Jul 2010
Reputation Points: 0 [?]
Q&As Helped to Solve: 6 [?]
Skill Endorsements: 0 [?]
 
0
 

Still not working. After I click on the change background paragraph nothing happens.
The code is

function cng(){
var imgs = new Array();
imgs[0] = "images/backy.jpg";
imgs[1] = "images/backp.jpg";
if(document.body){
document.getElementsByTagName("BODY").style.backgroundImage[0] = imgs;
}
}

The following works

<html>
<head>
<script type="text/javascript">
function cng(){
var imgs = new Array();
imgs[0] = "images/backy.jpg";
imgs[1] = "images/backp.jpg";
if(document.body){
document.body.background = imgs[0];
}
}
</script>
</head>
<body background="images/back.jpg">
<p style="color:white" onclick="cng()"><b>Change background</b></p>
</body>
</html>

Any suggestions about modifying the CSS via Javascript will be appreciated.

Member Avatar
almostbob
Nearly a Senior Poster
3,391 posts since Jan 2009
Reputation Points: 515 [?]
Q&As Helped to Solve: 425 [?]
Skill Endorsements: 14 [?]
 
0
 

a method
for logged in users, the uploaded image url is stored in the db and put into style.css.php on each login from either cookie or session details
of course the first lines of style.css.php look something like

<?php header ('content-type:text/css'); 
ob_start("ob_gzhandler"); ?>/*<style>*/
@media all { .dontall {display:none; } }
@media print { body { line-height:100%; font-size:10.5pt; font-family:verdana, arial, sans-serif; }
.dontprint { display:none; } }
@media screen { .dontshow { display:none; } }
a { text-decoration:none; }
a:hover { background-color:#66cdaa; text-decoration:none; } 
a:focus { background-color:#66cdaa; text-decoration:none;}
a:active { background-color:#66cdaa; text-decoration:none; }
body { background-color:#f6f6f6; body {background-image:url('<?php if(!$_SESSION['bg']) {echo 'paper.png';} else {echo $_SESSION['bg'];} ?>');} color:#000000; font-family:verdana, geneva, arial; margin-left:3%; margin-right:3%;}
/*   bla bla */
<?php ob_flush(); ?>

in the above case, the stylesheet is linked as <link rel="stylesheet" type="text/css" href="http://www.mysite.com/style.css.php"> the gziphandler speeds download of the css file, which is a great candidate for compression the file is large, and contains much repeated strings

Member Avatar
Airshow
WiFi Lounge Lizard
2,798 posts since Apr 2009
Reputation Points: 333 [?]
Q&As Helped to Solve: 393 [?]
Skill Endorsements: 11 [?]
Team Colleague
 
0
 

George,

This works for me (IE, FF & Opera):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript">
onload = function(){
	var currentBG;
	var imgs = [
		"url('http://www.daniweb.com/rxrimages/logo.gif')",
		"url('http://img1.cdn.adjuggler.com/banners/Client847175/1280785292729_728x90.gif')"
	];
	function cng(x) {
		if(document.body) {
			x = ++x%imgs.length;
			document.body.style.backgroundImage = imgs[x];
			return x;
		}
	}
	var changeBG = document.getElementById('changeBG');
	changeBG.onclick = function(){ currentBG = cng(currentBG); };
	currentBG = cng(1);
};
</script>
</head>

<body>

<input id="changeBG" type="button" value="Change background" />

</body>
</html>

Airshow

Member Avatar
george61
Junior Poster in Training
59 posts since Jul 2010
Reputation Points: 0 [?]
Q&As Helped to Solve: 6 [?]
Skill Endorsements: 0 [?]
 
0
 

Thanks for the help. I'm very interested in the following: the user clicks on the change background button and the user's my computer folder opens then he chooses image file from his computer for background. I need this because for the site I'm working on I have to make upload images option and the upload will be from the client hard disk.

Member Avatar
Airshow
WiFi Lounge Lizard
2,798 posts since Apr 2009
Reputation Points: 333 [?]
Q&As Helped to Solve: 393 [?]
Skill Endorsements: 11 [?]
Team Colleague
 
0
 

George,

<input type="file" name="bgFileUpload">

Airshow

Question Answered as of 3 Years Ago by Airshow, Chokladkakan, almostbob and 1 other
You
This question has already been solved: Start a new discussion instead
Post:
Start New Discussion
View similar articles that have also been tagged: