Welcome, Guest: Register On Nairaland / LOGIN! / Trending / Recent / New
Stats: 3,154,350 members, 7,822,653 topics. Date: Thursday, 09 May 2024 at 02:29 PM

How Do I Randomly Change Background Image Of My Pages - Webmasters - Nairaland

Nairaland Forum / Science/Technology / Webmasters / How Do I Randomly Change Background Image Of My Pages (4216 Views)

Yahoomail Background Image Advert / Help!!! Please Who Knows How To Add A Clickable Background Image On .com / Using Opacity On Background Image (2) (3) (4)

(1) (Reply) (Go Down)

How Do I Randomly Change Background Image Of My Pages by feelme3(m): 9:46pm On Dec 20, 2011
Hello webmasters,
I have a 6-page site and I would love each of the pages to have its own unique background image. Can anyone give tips or possibly codes I can use to achieve this?

Thanks in advance.
Re: How Do I Randomly Change Background Image Of My Pages by dhtml5: 7:21am On Dec 21, 2011
Haba. With basic html skills you can achieve that naa. . .

1 Like

Re: How Do I Randomly Change Background Image Of My Pages by Nobody: 7:44am On Dec 21, 2011
are you a web developer ?
Re: How Do I Randomly Change Background Image Of My Pages by deco2come: 9:36am On Dec 21, 2011
dhtml5:

Haba. With basic html skills you can achieve that naa. . .

pc guru:

are you a web developer ? 

What exactly is wrong with you guys? Someone asked a question which implies that he/she doesn't know the answer and that is why he/she is asking such question. Instead of answering the question, you guys show some arrogance and at the end did not even answer the question. Now tell me did you guys act like professionals? The answer is "No".
Besides, the questioner didn't mention his/her level in web designing. My brothers let's help each other rather than showing our power. I have got some great answers from you guys before and I want you guys to keep it up.

Anyway poster, I am assuming that you are using php. Let's assume that the name of your six pages are page1.php, page2.php, page3.php. Here is what you should do.

At the beginning of each page enter the code below
<?php

$currentpage = $_SERVER['SCRIPT_NAME'];
switch($currentpage){
         case '/page1.php':
    $bg = 'image1.jpg';
    break;
   
        case '/page2.php':
    $bg = 'image2.jpg';
    break;
   
      case '/page3.php':
    $bg = 'image3.jpg';
    break;
   
        case '/page4.php':
    $bg = 'image4.jpg';
    break;
   
        case '/page5.php':
    $bg = 'image5.jpg';
    break;
   
       case '/page6.php':
    $bg = 'image6.jpg';
    break;
   
           default:
    $bg = 'imagedefault.jpg';
    break;
}
?>

After adding all the other codes you want, add the below

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<meta http-equiv="Description" content="" />
<meta http-equiv="Keywords" content="" />
<head>
<style type="text/css">
.bga{
   
    background-image: url('imagefolder/<?php echo $bg ?>;');
}
</style>

</head>

<div class="bga">Testing This Out. If there is any problem, contact me</div>


Finally to explain some of the things above
$_SERVER['SCRIPT_NAME']; === It displays the name of the  page you are browsing. For example if the you are on www.example.com/page1.php, it will show /page1.php as the name of the current page.
Sometimes you might  have a sub-folder ex www.example.com/folder/page1.php, it will show /folder/page1.php as the current page.

You can modify the css i.e you can make it external or internal.

If you have any question, don't hesitate to ask. Happy Coding!!!!

2 Likes

Re: How Do I Randomly Change Background Image Of My Pages by ogzille(m): 11:32am On Dec 21, 2011
@deco +1
Re: How Do I Randomly Change Background Image Of My Pages by Nobody: 11:52am On Dec 21, 2011
@deco no I am not arrogant,geez what's the outburst for u don't even know why I asked ? Anyway the reason I asked was because I wanted to know if he had idea on web development so I can save myself the stress of telling him how to use a script I was looking for to give him. I think u should properly access the situation before jumping into conclusions,I get no kicks from showing arrogance or level of knowledge on forums I only come to help people without insulting others,I'd suggest you do the same too. Anyway nice one urs seems far better.

1 Like

Re: How Do I Randomly Change Background Image Of My Pages by Nobody: 12:04pm On Dec 21, 2011
@poster sorry for my misunderstanding u mean each page has a different image or when a page loads after a certain interval the background images changes. Just even realized without even jumping into Server sided codes u can just create an inline style to handle that
<Style>body,html{background:ur image path;}</style> but if u mean the later then its gonna be a javascript thing.
Re: How Do I Randomly Change Background Image Of My Pages by deco2come: 12:09pm On Dec 21, 2011
pc guru:

@deco no I am not arrogant,geez what's the outburst for u don't even know why I asked ? Anyway the reason I asked was because I wanted to know if he had idea on web development so I can save myself the stress of telling him how to use a script I was looking for to give him. I think u should properly access the situation before jumping into conclusions,I get no kicks from showing arrogance or level of knowledge on forums I only come to help people without insulting others,I'd suggest you do the same too. Anyway nice one urs seems far better.

I guess I misunderstood you guys. I hereby apologize to you guys. So sorry my buddies. You are even right. He can just manually choose the background image like you mentioned in each page. Poster hope you got your answer(s) now
Re: How Do I Randomly Change Background Image Of My Pages by Nobody: 12:22pm On Dec 21, 2011
Forget that one jare smiley that's one of the dangers of text based communications, messages can be easily misinterpreted. kiss
Re: How Do I Randomly Change Background Image Of My Pages by yawatide(f): 12:58pm On Dec 21, 2011
Lesson of the day: Words are powerful

deco + 10
Re: How Do I Randomly Change Background Image Of My Pages by feelme3(m): 10:43pm On Dec 21, 2011
I see maturity in the few comments here.

pc guru:

are you a web developer ? 

Yes sir, but just a newbie. I don't know if am up to that title yet smiley

@Deco, thanks so much for your patience and advice. God add to you wisdom. What I wanted was for each page (page1, page2, etc) to have its own unique background image and not change at intervals.
I had achieved that with a simple css line in the header but then somebody viewed it and told me to use php or javascript cos they'd make the page lighter. So i don't know how true that is (am just starting to learn php).
Anyways, I would utilize your codes and give you feedback.

pc guru:

@poster sorry for my misunderstanding u mean each page has a different image or when a page loads after a certain interval the background images changes. Just even realized without even jumping into Server sided codes u can just create an inline style to handle that
<Style>body,html{background:your image path;}</style> but if u mean the later then its gonna be a javascript thing.

Thanks. Appreciate your input.

yawa-ti-de:

Lesson of the day: Words are powerful

deco + 10

Maestro, thou sayest nothing?
Re: How Do I Randomly Change Background Image Of My Pages by yawatide(f): 11:50pm On Dec 21, 2011
deco said it all. Anything more, and it would be a distraction.
Re: How Do I Randomly Change Background Image Of My Pages by Nobody: 8:29am On Dec 22, 2011
hmmmm at poster i think you should stick to deco's own for this reason.

you type it once and just include it in all pages since it even handles default images also. if you are new to php you can try w3school its a nice place to start with then later once u know the basic head back here for some OOP Skills then we can initiate you to Zend Framework, so that Zend dev in Nigeria will grow in numbers. all the best
Re: How Do I Randomly Change Background Image Of My Pages by Nobody: 8:56am On Dec 22, 2011
Deco's code is too static for my liking. I wil do a dynamic version of it later when I am on pc.
Re: How Do I Randomly Change Background Image Of My Pages by Nobody: 10:19am On Dec 22, 2011
Okay. here we go.

You need to have your html files like this:
page1.html
page2.php
page3.html
page4.jsp

Whatever whatever, then create equivalent images like this for each page:
page1.jpg
page2.jpg
page4.jpg
page4.jpg


Now, inside your any of your pages, your background code will be the same - the bg.php will determine the equivalent image:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<meta http-equiv="Description" content="" />
<meta http-equiv="Keywords" content="" />
<head>
<style type="text/css">
.bga{
background-image: url('bg.php');
}
</style>

</head>

<div class="bga">Testing This Out. If there is any problem, contact www..net</div>


bg.php
<?php
$file=basename($_SERVER['HTTP_REFERER']); //the filename is something like page1.html
$file=explode('.',$file);
$file=$file[0];

header("Content-type: image/jpeg"wink;
readfile("$file.jpg"wink;
?>

That way, you can even use the background-image: url('bg.php'); inside an external stylesheet for all your pages.
And you wont need to update the bg.php unless you want to change your image type or image path or whatever.

If you have any issues, please let me know. It is quite simple eh?
Re: How Do I Randomly Change Background Image Of My Pages by Ymodulus: 12:04pm On Dec 22, 2011
While dhtml option is cool. I thin you need to be carefull on that header function. Pls make the TYPE a capital letter. Note like dis Content-Type. I notice an odd behaviour on IE about this a long time ago. Also use buffer to takee care of the headers sent. Cuz of some host enables buffer errors. Sorry am on mobile would have improved dhtml option. NOTE this too. If u are including dhtml option please make sure all your php script has no ending tag. Thats the "?>". I saw a note on php advisin the removal as some odd bbehaviours takes place
Re: How Do I Randomly Change Background Image Of My Pages by yawatide(f): 12:27pm On Dec 22, 2011
I have always claimed that I don't know much so this post may not make sense. All the same, here it goes:

Granted the site in question may be a small one, we still need to think scalability. On that note, I think operations like reading files consumes resources and could lead to leaks, if not handled on right. On that note, and yes, given that there is more than 1 way to skin a cat, I will go for deco's solution, again, given that it is a small site (what would happen if there are 1000 pages, with each having their own bg image?).

Eventually, he may want to look at something more efficient, like maybe:
1) Giving all images the same prefix (bg_)
2) Echoing the suffix, such that its name coincides with the file name shown in the browser (bg_<echo page-name>.jpg).

Again, what do I know? tongue
Re: How Do I Randomly Change Background Image Of My Pages by Nobody: 1:15pm On Dec 22, 2011
If we want the filename to show in the browser - my code can still handle it - just a slight adjustment in the write place.

And yes, the content-type is really - Content-Type - and PHP generally does not need a closing tag.

But at least, you get the idea behind my code eh? But you must be careful in your usage though and apply some security measures.
Re: How Do I Randomly Change Background Image Of My Pages by Nobody: 1:21pm On Dec 22, 2011
You can also write the bg.php like this:
<?php
$file=basename($_SERVER['HTTP_REFERER']); //the filename is something like page1.html
$file=explode('.',$file);
$file=$file[0];

header("Location: $file.jpg"wink;

it works exactly like the previous one.
Re: How Do I Randomly Change Background Image Of My Pages by deco2come: 5:15pm On Dec 22, 2011
@dhtml

I am impressed with your solution. I have to admit that there are some few questions I would like to ask. What if the browser/etc cannot catch the REFFERER. As you know, sometimes the user will just type the address in the browser without coming from another page. In such case, what do you think the bg image should be.

What if at some stage the user started developing an application that generates a random pages using the information in the database or somewhere or he has something like this http://www.example.com/folder1/page1.php?check=293493934983. If he try the basename() function, he will get something like page1.php?check=293493934983, what do you think the name of the picture could?
Re: How Do I Randomly Change Background Image Of My Pages by feelme3(m): 8:00pm On Dec 22, 2011
WOW!! My head is spinning from the intellectual web guruism being displayed here just for a newbie.

Will it help if I put up the site link/ FTP for a practical purpose?
Re: How Do I Randomly Change Background Image Of My Pages by Nobody: 8:45pm On Dec 22, 2011
deco2come:

@dhtml

I am impressed with your solution. I have to admit that there are some few questions I would like to ask. What if the browser/etc cannot catch the REFFERER. As you know, sometimes the user will just type the address in the browser without coming from another page. In such case, what do you think the bg image should be.

What if at some stage the user started developing an application that generates a random pages using the information in the database or somewhere or he has something like this http://www.example.com/folder1/page1.php?check=293493934983. If he try the basename() function, he will get something like page1.php?check=293493934983, what do you think the name of the picture could?
Very simple, then the op will upgrade the code or pay me to fix it. I am a business programmer you know, when i post codes, i only post in bytes and not in kilobytes.
Re: How Do I Randomly Change Background Image Of My Pages by feelme3(m): 8:54pm On Dec 22, 2011
*dhtml:

Very simple, then the op will upgrade the code or pay me to fix it. I am a business programmer you know, when i post codes, i only post Bosom-bits.

Lol grin grin post ya account number na,

(1) (Reply)

6 Reasons To Focus On Content Marketing And Improve Your Google Ranking / Airtel Nigeria Website Error Prone? / View Websites Remotely From Different Geographic Locations Using Geopeeker

(Go Up)

Sections: politics (1) business autos (1) jobs (1) career education (1) romance computers phones travel sports fashion health
religion celebs tv-movies music-radio literature webmasters programming techmarket

Links: (1) (2) (3) (4) (5) (6) (7) (8) (9) (10)

Nairaland - Copyright © 2005 - 2024 Oluwaseun Osewa. All rights reserved. See How To Advertise. 63
Disclaimer: Every Nairaland member is solely responsible for anything that he/she posts or uploads on Nairaland.