Letting users Change the background image of a website

Hey
I want to make my homesite more dynamic so i thought it would be a good idea to let the users change the background, from a range of images that i have uploaded, i can't figure out how to do it, any suggestions?

 

At the very least without having to bother with user logins and so forth, you can use cookies.

For example if you have a page showing the images, or a drop down you can assign the selected option to the user's cookie.

on the main page

//zero being the default BG
if(isset($_GET['mybg']) && $_GET['mybg']!=0){
$mybgid = $_GET['mybg'];
}
else { 
$mybgid = 0;
setcookie("mybg", '0' ,time()+3600*24*1000,"/",".yourdomain.com",0);
}

PHP:

On the setting page you can use setcookie() to set a new ID choice, you would just need to make sure somewhere on your home page you look at $mybgid and pull the file that corresponds with the ID for that user.

Sessions are an alternative to users who don't use cookies but sessions tend to expire after about 15 minutes or so, and using a login system you can keep their setting persistant where ever they go and log in.

 

thanks but doesn't fully get it how does it find the image i choosed?

 

and what should i attached the image with?

 

you need to make a list with the backgrounds.
each is a link, something like href="yourwebsite.com/index.php?mybg=(number)"

//zero being the default BG
if(isset($_GET['mybg']) && $_GET['mybg']!=0){//if the link contains ?mybg=
    $mybgid = $_GET['mybg'];//this is the number
    //now you can do a switch
   switch ($mybgid) {
    case 1:
       ?>
       <style type="text/css">
              body {
	              background-image: url('images/otherbackground.jpg');
              }
       </style>
       <?php
     break;


     case 2:
       ?>
       <style type="text/css">
              body {
	              background-image: url('images/otherbackground.jpg');
              }
       </style>
       <?php
     break;
}
else { 
       $mybgid = 0;
       ?>
       <style type="text/css">
              body {
	              background-image: url('images/backgroundImage.jpg');
              }
       </style>
       <?php
}

PHP:

I didnt test this but I think that it should work.

Good luck

 

On another page the user can choose.

I would have done all the work for you but I was busy on another job, just kind of figured you might have been able to figure it out from there. :/

 

That's an excessive amount of code when you could have simply done this:

<?
$mybgid = (isset($_GET['mybg']))?$_GET['mybg']:0;

switch ($mybgid) {
    case 1:
         $mybg = "otherbackground.jpg"; break;
    case 2:
         $mybg = "myotherbg.jpg"; break;
    default:
         $mybg = "mainbg.jpg";
}
?>
<style type="text/css">
  body { background-image: url('images/<?=$mybg;?>'); }
</style>

PHP:

But you'd have to make sure the &mybg=# is on the url from every link or you lose the setting. (thus why I presented the session idea, same way of loading it above but getting $_SESSION[] instead and making sure to do session_start() at top of each page)

 

Simply put you would have something like this for the session.

On the user selection page

<form action="save_bg.php" method="post">
    <input type="radio" name="bg" value="0">Ultra Blue<br/>
    <input type="radio" name="bg" value="1">Hot Pink<br/>
    <input type="radio" name="bg" value="2">Mean Green<br/>
    <input type="radio" name="bg" value="3">Cool Orange<br/>
</form>

Code (markup):

Then on save_bg.php

<?
session_start();
$_SESSION['mybg'] = $_POST['bg'];
?>

PHP:

Then at the top of every other page where you want to load the user's selected background:

<?
$mybgid = (isset($_SESSION['mybg']))?$_SESSION['mybg']:0;

switch ($mybgid) {
    case 1:
         $mybg = "hot_pink.jpg"; break;
    case 2:
         $mybg = "mean_green.jpg"; break;
    case 3:
         $mybg = "cool_orange"; break;
    default:
         $mybg = "ultrablue.jpg";
}
//however if your backgrounds were numbered you could skip the whole switch statement and just do:
//$mybg = "background_".$mybgid;
?>
<style type="text/css">
  body { background-image: url('images/<?=$mybg;?>'); }
</style>

PHP:

 

Can't get it work, weird