Create full-browser background img

afairclo / 2010-06-21 20:24:39   

Question:

Do you think another possible way of going about the full-browser background effect is by tweaking the coding used for the background plugin (exhibit.backgrounded.php) included with indexhibit?

I think the only issue would be trying to figuring how to remove the default thumbnail image in the upper left hand corner and having the background load on it's own without an onclick cue.

Do you guys think this is doable/makes sense/reasonable?

verena / 2010-06-24 08:46:06   

Hi there, I just followed step by step the instructions for the full background plugin. Still it's not working, the pictures isn't resizing. What can I do? I guess it's a very simple problem (I already got it to work on another site, but I just can't remember what I did there...) Can anyone help?
Thanks a lot!
V.
Webpage

verena / 2010-06-24 14:57:59   

Sorry, it's all fine now, I have no idea why, but mysteriously the picture is resizing now. Magic, magic...
V.

zuralo / 2010-06-29 20:37:49   

Hi arsondpi, thanks for watching over us clueless...
I followed the instructions to the letter. I have installed, updated and all. everything seems to work just fine. but for some reason it does not resize the image automatically to the window. It resizes the background image only when I try to change the size of the window (manually). I don't get it. I wrote and rewrote the code tried it a gazilion times. what am I doing wrong?
webpage

zuralo / 2010-06-29 21:38:13   

SO, I reordered my php and it seems to work fine now. so please disregard my last post. thanks anyhow

arsondpi / 2010-06-29 22:01:11   

:-)

bsemple / 2010-06-30 01:00:30   

Hello,
I have followed all the steps for creating a full-browser background (I think...) but I keep finding that my image doesn't re-size itself. I have a large image on there, have tried smaller ones too but same problem. It cuts off part of the image instead of scaling it to fit my browser.
Any help would be really appreciated!

www.hivehair.com

bsemple / 2010-06-30 01:10:10   

aww...sorry guys. iquery.js update! works like a charm thanks again!

restre / 2010-06-30 03:07:00   

Hi guys I'm pretty new at this web thing and even more to the indexhibit thingy.

I've been trying to pull off the full-browser background img but I can't seem to get around it.

I don't get an image and obviously no rezise.

Anyone wanna enlighten me?

This is my page

Ty!

restre / 2010-06-30 03:08:02   

Oh and I don't know how to update Jquery, been looking around the forums but no succes on the update process! Thx again!

restre / 2010-06-30 03:23:40   

Nvm!!!!

I got IT!!!! missed something called a tag somewhere.

I'll keep workin on this thing...

Now for the menu ;)

orionrush / 2010-07-09 18:50:48   

I've scoured this thread and I've not seen this posted anywhere. It's not in the readme - though its a easy additional step.

Basically I noticed that the javascript wasn't firing on image load, but only until the window was resized.

This seems to be fixed by loading the script before the image.

in your template:
ndxz-studio /site/yourtemplate/ index.html

  1. Add the following in the <head> just below the other scripts such as cookie.j and the current version of jquery 
  2. <script type='text/javascript' src='<%baseurl%><%basename%>/site/js/full_background.js'></script>

voilà!

hatfrog / 2010-07-10 12:10:10   

Hey! New here.

I just used arsondpi instructions and everything works to a certain extent. I mean, now when I set a background image, it appears, only its above the menu and such. This is another problem altogether, i'm still researching, there seems to be a fair amount of help regarding that in the forums.

What confuses me is now I can't click anything, be it in preview mode, or visiting the website. Something is very wrong.

Anyone had this problem before? Any suggestions to what i wrong?

www.hatfrog.com

orionrush / 2010-07-10 12:43:29   

the solution is in the z-index. if you look at the css rules you will notice a z-index rule being applied. THis conflicts with other z-index rules, for example wobblebox's. Search the this thread and I believe you'll find other people that have fixed it.

Its not that complicated in the end - find the styles that apply to the background and make them float below everything else you've got going on - or give the other elements a higher z-index.

hatfrog / 2010-07-10 14:54:48   

It worked! It both solved the no-clickable links and the menu on top of the background.

And for whoever finds the same, I added a

z-index:3;

In the #menu section of style.css, thus putting it above the background (z-index 1 and 2 for wrapper) it seems.

My knowledge of css pretty much starts from 2 days ago reading this forum, so just doing this makes me feel awesome :D

I'm sure I'll find more problems, but thanks a lot orion.

hatfrog / 2010-07-10 15:23:58   

And by the way, it seems everything I want to show I have to change in the style.css.

Then what does the ie.css do?

orionrush / 2010-07-10 16:47:50   

if you look up in the head of your template you'll see reference to it. These are conditionals and look like they are commented out but are in fact only read by various version of IE.

Look at your site in all browsers, but especially in various version of ie 5678.

If you find that changes you made throw off IE you can make changes in the ie.css to fix it.
A pain in the butt but necessary.

if your not on a windows box google netrender.

lpng / 2010-08-05 12:29:33   

Just wanted to say that I got it working by carefully analysing Sylvain's index.php/style.css and comparing with mine (sylvainthomin.com/).

Then I realised there was just a line break missing in the javascript… (copied an early version from someone, somewhere).

I got it working in like 1h or two, and I'm a real newbie so it does pay to just read everything that's been told and just try-out!

Anyone who's not too good with css and js/php, like me should really set everything up in MAMP, before going online, it saved me plenty of errors and headmunching!

thanks all for the info/support(/patience)!

arsondpi / 2010-08-08 12:08:10   

full-browser background plugin.
Read the Do me first file...

felixfeely / 2010-08-23 14:07:58   

So fantastic! Thanks.

frederikk / 2010-08-23 20:15:27   

Nice plugin - and very useful. Thanks a bunch :)

Any possibility of making it possible for the img to crop the top first? I've tried changing top: 0 to bottom: 0 in both the js and the css, but with no luck. If it's possible I would be one happy onion :)

Inge / 2010-08-24 16:04:18   

Hi 'Forum',

Can you help me?
I Want a full-Browser background image, but only on my homepage. all the rest should be blank. Is there an easy way! please tell me!

It's my first time, so far i managed to use the columner theme with the horizontal format. But now i'm lost. I don't understand much about al the forum entries about this subject.

website:
www.mathieclaeys.com

thanks,
Inge

Inge / 2010-08-24 16:06:24   

Hi 'Forum',

Can you help me?
I Want a full-Browser background image, but only on my homepage. all the rest should be blank. Is there an easy way! please tell me!
It's my first time, so far i managed to use the columner theme with the horizontal format. But now i'm lost. I don't understand much about al the forum entries about this subject.
www.mathieclaeys.com
thanks,
Inge

arsondpi / 2010-08-24 16:47:26   

full-browser background plugin.
Read the Do me first file...

The plugin works thoughout your site... Of course you can make an exhibition plugin if you know how...
I've done this for my site and eventually I will release it at some point...

klodett / 2010-09-14 14:25:37   

Hi. I´ve just tried the full background plugin. I love it.
At first, i had problems with the menu being hidden under the background, as well as text in the exhibits. I solved it by changing the z-index. (in wrapper and background tag)-
i have only one problem left- i put a link in the main page and i cannot click it. (my first try is a facebook share link, far right) i tried changing other z-index values, but nothing. i think it´s a very silly error.
Help is very welcome.

my webpage

arsondpi / 2010-09-14 14:35:20   

#the-background should be at the top of your body.
#wrapper should be after #the-background and it should wrap #menu and #content.

Re-read the DO_ME_FIRST.html help file...

dchar / 2010-09-22 09:07:44   
How i can change my background image?
i used
dchar / 2010-09-22 09:08:46   
Hi all!
How i can change my background image?
i used
arsondpi / 2010-09-22 09:28:04   

there's no need to doublepost...

robotsarah / 2010-09-23 20:59:00   

Hi all. I read through the thread and seem to be having the same problem that a few others had: post-install I lost the ability to click on links.

I played with the z-indexs and was able to get all my layers clickable EXCEPT the main body of my site. I am hoping someone can enlighten me with the issue.

This is the deepest I've gone into CSS and I am hoping that there is some silly mistake that someone can correct for me!

For example, here is my site info page (cuz the index does not have any links to click):
sarah-ludwig.com/site-credits

Here is my CSS
http://sarah-ludwig.com/ndxz-studio/site/thecentered_theme/style.css

Fingers crossed - I am on a tight deadline and this bug is killing me :(

7 / 2010-09-23 21:43:54   

Hi Sarah, yeah you have two #wrapper divs ;) Get rid of the one you're not actually using in the index.php

It's easy to see it with firebug.

robotsarah / 2010-09-24 00:00:07   

@7 thank you so much!! I've been having issues placing my objects and all my divs got messier than I could suddenly handle.

betsbillabong / 2010-10-06 11:16:11   

Dear all,

I'm sorry to say I have been at this for two days and I *still* cannot get the plugin.random_full_background.php to work. The background of my website stays resolutely white. I have searched for #FFF tags on both style.css and index.php and found none. I haven't even approached ie.css yet.

I have been through Sawatzki's tutorial time and time again. I know I must be missing something, but I can't find what I'm doing wrong with the code.

Can anyone take a look and let me know? I think it has something to do with the path to the image folder (bgbig). I mean, I'm pretty sure I'm putting it in the right place - the root; so it is at the same level as 'files' and 'ndxz-studio'. I also put a copy in 'files' and in the theme folder, but that doesn't seem to help.

my website in progress

You can also download my 'index.php' file.

Also: is there a way to see other people's index.php files? I know I can view source but I think that is what gets spit out FROM the php, yes?

Thanks!
Betsey

arsondpi / 2010-10-06 11:22:53   

Your page needs fixing...

$('#select').sSelect({ddMaxHeight: '220px'}); produces a js error that might affect other scripts...
And I also saw that you're loading jquery 1.1.2 and 1.4.2 - use just one...

betsbillabong / 2010-10-06 11:42:55   

arondpi,

thanks so much! i will be back in a sec to tell you if it worked...

betsey

betsbillabong / 2010-10-06 12:30:12   

So, I've just made all of those changes. And still, nothing is happening. Any further ideas of what might be going wrong? The background stays resolutely white. Another odd thing is that within an exhibit (I'm doing this on the main page), I can change the color with the color picker, but background images uploaded on the exhibit page don't load at all.

Any suggestions would be incredibly appreciated. I have pulled two all nighters trying to tackle this. THanks so much for any help any of you can give.

again:

website is here

and

newly changed index.php is here. (thanks arondpi).

betsey

betsbillabong / 2010-10-06 12:33:03   

(I should also add that I removed all other versions of jquery from the server, and I noticed that it was being called twice so I removed one instance of it.)

Are the scripts in the right order? That side of things has been very fuzzy to me...

betsbillabong / 2010-10-06 18:14:38   

Hey all - just wanted to let you know that I'm still working on this... I made some changes to the index.php and style.css files in an attempt to clean things up.

Right now there's a color chosen through the color chooser simply because I couldn't stand to look at it on plain white anymore. I've uploaded a jpg through the exhibit to display as the background, but it doesn't show up. I still can't get this to work at all... sigh. Can someone take a quick scan of the code and let me know if I'm missing something simple? I've tried adding the code to a plain vanilla (ie, Sample) template too and that didn't work, either. Is my bgbig folder in the right place?

Website is here

and

most recent index.php is here.

Thank you!
BB

betsbillabong / 2010-10-06 22:58:16   

rickykappa, any chance you might have a second to glance at my code and see if there's anything obviously wrong with it (vis-a-vis the random full background plugin?). I've spent about 48 hours troubleshooting it and am rather about to throw my laptop into the fire...

arsondpi / 2010-10-07 08:10:38   

These lines ought to have the image tag in it...

  1.     <div id='the-background'>
  2.     </div>

...one thing: are you uploading an image which never gets uploaded (the thumbnail doesn't show when trying to upload) or uploading an image that gets uploaded fine but doesn't show when previewing your site?

betsbillabong / 2010-10-08 06:06:03   

hi, thanks everyone for your help. it is still not working.

my site in progress

zipped index.php with what i hope is correct code

CSS stylesheet with what i hope is correct code

i started from scratch to add the code but still no dice. i think my div code is correct (i've followed the instructions over and over) but please take a look! sorry, i can't figure out how to post code on here... but i have substituted parentheses for brackets:


(div id='the-background')
(plug:rnd_full_background images /) (!-- for a custom folder, change "bgbig" to whatever folder url you want to use! --)
(/div>

betsbillabong / 2010-10-08 06:26:50   

Well.

I have changed nothing on the site, and now full random background is working. I totally don't understand, but maybe there was something going on with my host? I didn't change any code since I last posted!

Anyhow, thank you arsondpi for your help - I appreciate it.

Something that may help others: when the random part of it started working, it was not resizing the image. I am also using the expanding menu js, and I put the script for that at the very end of the (head) section, just before (/head). Now it works perfectly.

And I don't plan on touching it...!

betsbillabong / 2010-10-08 06:51:00   

Arrghh. I spoke too soon.

I would like this script to affect only the main page of my site, so I un-commented lines 29-30 and 80-82 of plugin.random_full_background.php.

But when I upload the altered plugin and access my site, I get the following error:

Parse error: syntax error, unexpected T_ELSE in /home2/betseybi/public_html/ndxz-studio/site/plugin/plugin.random_full_background.php on line 81

80: }
81: else
82: {

Any thoughts on this? Or is there another way to limit the random full background to the very first page?

Thanks,
BB

arsondpi / 2010-10-08 08:17:32   

I'm not sure I'm following you: this thread is about the full-browser background plugin and works differently to the random version. If you want to customize things then (assuming you know how to code in php) edit the plugin to make it do whatever...

betsbillabong / 2010-10-08 15:31:03   

OK. I find these forums a bit confusing. Thanks for reading, and for your suggestions.

I downloaded Sawatzki's .dmg file that contains the plugin plugin.random_full_background.php and step-by-step instructions for making it work. It can be found here. You had referenced it in another thread so I thought you were familiar with it.

I would like to get a random background image on the main page only - and the plugin is well commented to instruct me to do just that - it asks me to un-comment two sections. However, when I do that I get the error described above. I don't know much about php though I've hard-coded basic html for a long time, so I don't feel prepare to just alter anything without instruction. But the instructions seem pretty clear and simple.

Perhaps I'm in the wrong place. Do you think I should just start a new thread? If so, where? There's a lot of helpful information (and people!) in these forums, but it's really hard to understand how things have progressed over time, which versions of which plug-ins are more recent or are obsolete, etc.

Anyhow, thank you, and let me know if you have any advice.

BB

betsbillabong / 2010-10-08 15:59:50   

OK. I have found the solutions to my two problems, thanks to Tom Cardoso. Thanks, Tom! I hope reposting similar information is not problematic; I would have killed for answers like this.

A couple of things I learned that may be helpful for others having trouble getting the random_full_background.php plugin to resize the background or limiting the plugin to the main page only:

(1) If you are using the expanding menu code, put the script that lists the numbers of windows that you close at the very end of your code, just before (/head). Sawatzki's instructions tell you to put the full_background.js at the very end, but when you switch them it works, at least for me.

(2) THANK YOU TOM CARDOSO! for helping me to limit the random full background to my main page only. The commented instructions in the random_full_background.php, while extremely helpful and organized, I think are actually wrong. Like Tom, I was also getting straight-out errors when changing that code. So to reiterate his advice:

- first, un-comment the code at the top, as per instructions
- second, do NOT un-comment the code at the end (the brackets with the 'else') keep it commented
- third, add a single closing bracket ( like this: } ) just above 'return;' so it should like this at the end:


}
return;
}


This should allow you to have a full random background on your main page only which resizes dynamically.

Thanks to all - and hopefully I am done with this for the time being!

betsbillabong / 2010-10-08 16:32:07   

Actually, I have one more question about how to then enable background images on the other pages of your site. I won't repost the question here, but arsondpi or others who might have the answer,

please read my question here.

Thanks.

bazinga / 2010-10-28 04:50:22   

somehow i have to set my Z-index number to -1 for the background and -2 for the wrapper in order to work~~~~~maybe someone else in the world having the same problem ~~~haha

sbstn / 2010-11-07 20:46:11   

Hi everyone, I got this working, but now the photos don't show when i use the "Backgrounded" exhibition format.

Are these incompatible or is there something i need to adjust???

http://www.eleveneleven.mx/coleccion/

Thanks!

arsondpi / 2010-11-08 11:08:35   

they're incopatible - but you can fix it...

FInd:

  1. $('body').css({ backgroundImage: 'url(' + show.src + ')', backgroundPosition: '0px 0'  });

to

  1. $('#wrapper').css({ backgroundImage: 'url(' + show.src + ')', backgroundPosition: '0px 0'  });

This thread has been closed, thank you.