Smack Jeeves Forums

Welcome to the forums! Enjoy your stay!

<< Return to Smack Jeeves

Skip to content

Random Background Image

Topics that have been resolved and may be useful but do not fit into the knowledge base - either they're too specific, or they're duplicate questions.

Moderator: Help Desk Team

Post a reply

Random Background Image

Postby Apple » May 17th, 2010, 2:54 am

Hi, I wounder if anyone can help me.

I've been trying to create a random backround image thing for one of my comics (on the template Blingmobile), but I haven't been able to figure out how to do it.

I fond the bit of code where you can put your own image:

Code: Select all
background: url(http://www.smackjeeves.com/templates/blingmobile/images/bg_paper01_blue.png) repeat;


I've tried using a random banner generator to do the randomizing of the backround, but either I've been putting it in the wrong place, I've acidently deleted a code thats needed, or it just plain dosen't work, I don't know.

If anyone can help with this you will have my thanks.
Bacon OF DOOOOOOOOOOOOOOOOOOM

"Djoing: The green one is Saria. Some of the things she says are pure nonsense, and her intelligence isn't excatly well maintained, but shes a good fighter and a great honest person.

Saria: Bacon for all!"
User avatar
Apple
 
Posts: 25
Joined: June 9th, 2008, 1:36 pm
Top

Re: Random Background Image

Postby granmastern » May 17th, 2010, 5:27 am

Hi Apple,
First off
Apple wrote:
Code: Select all
background: url(http://www.smackjeeves.com/templates/blingmobile/images/bg_paper01_blue.png) repeat;



Delete that code and do the following:

1.
Put this somewhere in <head>:

Code: Select all
<script type="text/javascript">
<!--
if (document.getElementById) { window.onload = swap };

function swap() {
var numimages=3;
rndimg = new Array(
"INSERT IMAGE URL 1",
"INSERT IMAGE URL 2",
"INSERT IMAGE URL 3");
x=(Math.floor(Math.random()*numimages));
randomimage=(rndimg[x]);
document.getElementById("randomimg").style.backgroundImage = "url("+ randomimage +")";
}
//-->
</script>


2.
Look for <body> and replace that with <body id="randomimg">



Note that you can easily change amount of random images to display by simply adding/removing the number of urls and assigning that same number for "var numimages= x"
Here's an example.
granmastern
 
Top

Re: Random Background Image

Postby Apple » May 17th, 2010, 11:50 am

Thanks for the help granmastern. It works now :D
Bacon OF DOOOOOOOOOOOOOOOOOOM

"Djoing: The green one is Saria. Some of the things she says are pure nonsense, and her intelligence isn't excatly well maintained, but shes a good fighter and a great honest person.

Saria: Bacon for all!"
User avatar
Apple
 
Posts: 25
Joined: June 9th, 2008, 1:36 pm
Top

Re: Random Background Image

Postby granmastern » May 17th, 2010, 11:53 am

No problem, glad to help out =D
granmastern
 
Top

Re: Random Background Image

Postby Apple » July 16th, 2010, 9:19 am

Hi again. Sorry to dig this up, not sure if thats allowed or not, but I have a minor question to ask in relation to my query before.

For some of the backrounds i've done for the random backround thing its coming out a bit off sided when looked on with a bigger screen then the one that i use.

To remady this I wanted to try centring the backround image as well as make it streched (non tiled), but I can't get it to work.

I know for ordinary backgrounds you put somthing like no-repeat, centerleft or somthing like that next to the backround code, but I'm not sure where to put it for the random generator code, or even if it can be done.

Thanks in advance for any help
Bacon OF DOOOOOOOOOOOOOOOOOOM

"Djoing: The green one is Saria. Some of the things she says are pure nonsense, and her intelligence isn't excatly well maintained, but shes a good fighter and a great honest person.

Saria: Bacon for all!"
User avatar
Apple
 
Posts: 25
Joined: June 9th, 2008, 1:36 pm
Top

Re: Random Background Image

Postby eishiya » July 16th, 2010, 9:43 am

I think you should be able to set all those properties in the CSS like you would for a regular background, but they will apply to all the backgrounds. If you want different properties for each background, you will need to change the Javascript code to also output CSS based on the background image chosen (not as hard as it sounds, and if this is what you want to do, I can try to explain it).
Busy, busy.
User avatar
eishiya
 
Posts: 5738
Joined: December 5th, 2009, 11:17 am
Top

Re: Random Background Image

Postby Apple » July 16th, 2010, 2:24 pm

Do you mind if you explain it a bit more to me? I'm not the best when it comes to Coding.

Thanks again.
Bacon OF DOOOOOOOOOOOOOOOOOOM

"Djoing: The green one is Saria. Some of the things she says are pure nonsense, and her intelligence isn't excatly well maintained, but shes a good fighter and a great honest person.

Saria: Bacon for all!"
User avatar
Apple
 
Posts: 25
Joined: June 9th, 2008, 1:36 pm
Top

Re: Random Background Image

Postby eishiya » July 16th, 2010, 3:03 pm

The background shown by the big piece of Javascript code given to you before is affected by CSS. Remember that short line grandmastern had you edit out? That was CSS.

I'm not 100% sure what you're looking to do, so I can't offer real help right now. If I'm guessing correctly, you don't like the fact that the backgrounds aren't centred around your content? Try adding
Code: Select all
background-position:center;

to where you removed that first line before.
Busy, busy.
User avatar
eishiya
 
Posts: 5738
Joined: December 5th, 2009, 11:17 am
Top

Re: Random Background Image

Postby Apple » July 17th, 2010, 11:19 am

Thats done it.

Thanks ^.^

One final question, if i wanted to fixed the background in place would i do this?
Code: Select all
background-position:fixed-center;
Bacon OF DOOOOOOOOOOOOOOOOOOM

"Djoing: The green one is Saria. Some of the things she says are pure nonsense, and her intelligence isn't excatly well maintained, but shes a good fighter and a great honest person.

Saria: Bacon for all!"
User avatar
Apple
 
Posts: 25
Joined: June 9th, 2008, 1:36 pm
Top

Re: Random Background Image

Postby eishiya » July 17th, 2010, 12:44 pm

No, you would do
Code: Select all
background-attachment: fixed;
background-position: center;

or
Code: Select all
background: fixed center top;
Busy, busy.
User avatar
eishiya
 
Posts: 5738
Joined: December 5th, 2009, 11:17 am
Top

Re: Random Background Image

Postby Apple » July 17th, 2010, 1:20 pm

Yes thats done it.

Many thanks!
Bacon OF DOOOOOOOOOOOOOOOOOOM

"Djoing: The green one is Saria. Some of the things she says are pure nonsense, and her intelligence isn't excatly well maintained, but shes a good fighter and a great honest person.

Saria: Bacon for all!"
User avatar
Apple
 
Posts: 25
Joined: June 9th, 2008, 1:36 pm
Top
Post a reply

Return to Resolved Topics

Who is online

Users browsing this forum: No registered users and 0 guests

Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group