Jump to content

Archived

This topic is now archived and is closed to further replies.

kinglou75

Area Background Randomizer?

Recommended Posts

kinglou75

Is there a way (or a plugin) that can randomize the backgrounds for pages when they are loaded?

Share this post


Link to post
Share on other sites
Danny

Hi,

 

Yeah, you will need to do the following:

 

1. Go to this website (creator of Wordpress) and copy and paste the code provided on his site. http://ma.tt/scripts/randomimage/

2. Paste the code into a code editor and save the file, naming it rotate.php

3. Now using your FTP client, create a folder called images (although it can be anything) and upload the rotate.php file to this folder.

4. Now add any images you want to be used for your random background to the same folder the rotate.php file is in.

 

Thats it, all you need to do now, is link to the rotate.php file in your CSS.

#site {
background-image: url(path to rotate.php);
background-size: cover;
}

If you want to use them for a specific page on your site, you would need to use the following code.

.page-id-3 #site {
background-image: url(path to rotate.php);
background-size: cover;
}

Remember, that this script randomly loads an image upon page load.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
kinglou75
Awesome thank you. Do I link the background and the rotate.php after the background image:? And for the specific page. Do I put the whole URL were the page I'd is?

Share this post


Link to post
Share on other sites
kinglou75

Looks like I get the code working, because when I type in the URL to the rotate.php it brings up a random image from that folder. But I am getting a compile error. This is what I drop into the custom code area of DMS:

 

#site {
background-size: cover;
}
 
Also please note I dont want to do it to the WHOLE background. Just the content part. I wanna leave the header and footer / sections alone. See this page for an example. Just want to change out the content background.
 

Share this post


Link to post
Share on other sites
Rob

Hi,

 

Page IDs are found in Dashboard > Pages > All Pages -- click to edit the page and in the URL/Location/Address bar, you'll see the page-ID number.

 

The code is prefixed like this:

 

.page-id-XX #site {YOUR CSS}

 

Now, based on what you've stated, I believe you should be applying a unique class to the individual container you want the background in. You view the site in Chrome, select the column/content area that you want modified and select the little pencil icon (edit).  There, you'll find an input field for a unique styling class.

[attachment=1614:10-4-2013 4-35-52 PM.jpg]

As you can see, you write up a unique class when editing the content area.

 

Then, with that class you write your CSS:

 

.my-unique-area1 {background-image:url('http://www.thefullURLtoyour.com/imagefolder/image.gif');}

 

See this http://www.w3schools.com/css/css_background.asp  to find the variables applied to backgrounds.

 

 

 


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Rob

You're missing the single quotes around the URL.

 

.common-area {
background-size: 100%;
}

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
kinglou75

Thank you its working great!

Share this post


Link to post
Share on other sites
Rob

You're very welcome!


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites

×