Member Avatar for george61

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).

  • 5 Contributors
  • 9 Replies
  • 418 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by Airshow
Member Avatar for Chokladkakan

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

Member Avatar for george61

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

Member Avatar for Chokladkakan

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 for Taywin

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.

Edited by Taywin because: n/a
Member Avatar for george61

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.

Edited by george61 because: n/a
Member Avatar for almostbob

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

Edited by almostbob because: n/a
Member Avatar for Airshow

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

Edited by Airshow because: n/a
Member Avatar for george61

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 for Airshow

George,

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

Airshow

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.