Create full-browser background img

poivrelost / 2009-07-22 14:48:32   

Hi Steven...

are you sure you put that code...

  1. #the-background {
  2. position: absolute;
  3. z-index:1;
  4. width: 100%;
  5. height:100%;
  6. top:0;
  7. left:0;
  8. overflow:hidden;
  9. }
  10. #wrapper { 
  11. position: absolute;
  12. z-index: 2;
  13. width: 100%;
  14. height: 100%;
  15. top: 0;
  16. left:0;
  17. }

hope this will help...

sas_steven / 2009-07-22 15:23:44   

something strange is going on, and i haven't a clue as to what. i tried googling a few things, but couldn't find any info on it. this is the relevant code from my css file:

  1. #the-background {
  2.     height: 100%;
  3.     left: 0
  4.     overflow: hidden;   
  5.     position: absolute;
  6.     top: 0;
  7.     width: 100%;
  8.     z-index: 1;
  9. }

#wrapper { 
position: absolute;
z-index: 2;
width: 100%;
height: 100%;
top: 0;
left: 0;
}

and this is what firebug shows is actually coming through to my site:

  1. #the-backgroundÔøΩ {
  2.     height: 100%;   
  3.     position: absolute;
  4.     top: 0;
  5.     width: 100%;
  6.     z-index: 1;
  7. }

#wrapperÔøΩ {
left: 0;
}

why are so many parameters [including overflow: hidden;] not coming through to the actual site? and what are these question marks after the id's? do i have some sort of syntax problem? i'm spacing it the exact same way everything else is spaced in my css file... any direct help, or a link to a reference to better understand what firebug is showing me, would be greatly appreciated! again, my Site.

arsondpi / 2009-07-22 19:12:30   

-in #the-background, left:0 is missing a ; in the end

-also you have weird characters showing up after each id name instead of spaces:
#the-backgroundÔøΩ and #wrapperÔøΩ
get rid of them - something to do with the encoding of your file when you save it...

Last but not least are you gonna be changing the logo area in each exhibit?
If not (meaning it is gonna be the same throughout your pages) you can put your code in the pre-nav text box in Settings.

Try this download instead of copying code... I have made mistakes in the code in previous pages so the file from the link above provides all the right steps to do it...

sas_steven / 2009-07-22 20:17:28   

ok, i don't know what was wrong... if there was a bad keystroke in there or what, but i re-entered the code for #the-background and #wrapper, and now firebug is reading all of the proper entries on the site. it also is clipping my background correctly - in other words, for my wide screen monitor [1680x1050], it clips the bottom portion of a 4:3 image. however, i still have a scroll bar, and there is a portion of white below the image that i would like to eliminate. i felt certain this was happening because some other element in my css was asking for that much height on the screen, and i have overflow:auto; set for my body tag now, but i can't for the life of me see which element is causing the extra white at the bottom that calls for the scroll bars. can anyone see it? or am i barking up the wrong tree?... Site.

and arsondpi... i divorced the logo area from the menu [via the pre-nav text box] because on several pages i am hiding the menu, but want the logo box to remain. it means pasting in some html into a lot of exhibit pages, but i don't mind, and it gives the flexibility i want without the coding knowledge i would no doubt need [and don't have] to hide the menu but keep the pre-nav text box showing. hope that is a somewhat clear explanation...

thanks all, as always, for the wonderful and prompt help!

arsondpi / 2009-07-22 20:54:26   

Hey there!!!

...get rid of height:100%; in your #content .container
scrollbars are added cause #content has a height 100% of your page and #content .container has padding and (again) a height 100% of your page.

ps. if you be kind enough to get that indexhibit link to work... ;-)

sas_steven / 2009-07-22 21:11:26   

done and done!
that was the trick! i'm still not exactly clear on why the height 100% was a problem, since the bottom padding was 0 anyway... but sometimes you don't have to understand, you just have to do!
thanks so much for the help, and the link is in full working order now. sorry about that. i have every intention of giving indexhibit all the press i can - it's been amazing to work with, and the forum has been absolutely invaluable.

heather3325 / 2009-07-28 18:37:19   

hi..

I have done all of arsondpi's instructions and have jquery 1.3 - I realized there was no index.php file in my eatock Theme, so I stole one from the "sample" theme, did the alterations and copied it to my eatock folder.

Still not working...
I must have missed something.. help? site in question: www.heatherrasmussen.com

THANKS!
heather

7 / 2009-07-28 19:39:14   

Heather you should probably be working from the Sample theme as good indexhibit practice ;) Or copy it and rename it to like heathers_theme. Just so you've got something to fall back on and all that.

On your site as it is now I dont see the "the-background" div.

Which is quite an important part of Arsondpi's instructions ;)

heather3325 / 2009-07-29 00:55:11   

thanks 7
I have it almost figured out....

the only issue now is that the image does not FIT TO the browser size AND my MENU has disappeared.

When i remove this code from my style.css, the menu reappears, but the image still does not fit.

#the-background {
position: fixed;
overflow: hidden;
z-index:1;
width: 100%;
height:100%;
top:0;
left:0;
}
#wrapper {
position: absolute;
z-index: 2;
width: 100%;
height: 100%;
top: 0;
left:0;
}

is there a specific place within my style.css that this code goes? why does it erase my menu when I insert it?

site: www.heatherrasmussen.com

jc29 / 2009-07-30 03:43:26   

just diving into indexhibit. Super noob if u will.

i have followed Arsondpi's steps to get the full background quite closely.

This might be a silly question but how do I upgrade to jquery 1.3. i downloaded the release but dont really know what i am doing

palsecam / 2009-08-11 22:14:29   

up !

hello,

i have been working on the full browser background for a while now, read the whole thread, downloaded the package and followed ardsonpi's instructions to the letter. thank you vaska and ardsonpi for being patient with non coders...

my background image is not resizing to the browser, and worse, it is not even fully showing (half of it is "under" the menu).

could someone take a look a my page (pure draft, no content sorry)

also i may not have jquery upgraded but after looking online i could not figure out how to do that : would you give us a starting point or direct us to a tutorial ?

thank you so much if you have time to take a peek.

palsecam / 2009-08-11 22:16:03   

working link for my page (i messed it up in my previous post) :
http://camillepaloqueberges.free.fr/index.php?

arsondpi / 2009-08-11 23:08:17   

...yep - you have the version of jquery that came with indexhibit...

For all the people asking how to upgrade do these:

1. Download from either the jquery.com site or here.

2. Rename the downloaded file into jquery.js

3. Upload to: ndxz-studio ‚Üí site ‚Üí js and overwrite the old jquery file...

Once again by uprading to a newer version you're gona lose thickbox as plugin. And keep backup files...

palsecam / 2009-08-11 23:24:20   

thank you very much :)

but :( for the missing plugin.

palsecam / 2009-08-11 23:30:10   

additional note : upgrading to jquery 1.3 did solve the problem

now my full browser background image is resizing

very cool ! thks again.

benkrebs / 2009-08-12 17:25:34   

installed on my site with no problems; my only remaining question is in regards to using a random image like mentioned in the start of this thread.. i've been comparing the rand_bg plugin to see if i could figure something out, but i'm inclined to think there is an easier way

any ideas?

ckg / 2009-08-13 15:58:04   

Hi benkrebs
Have a look at these:

http://www.tylerstefanich.com/

This one uses supersize:

http://www.elinewielenga.nl/

sas_steven / 2009-08-20 19:29:57   

I'm having a very similar problem to one i've had before... I am getting vertical scroll bars with this full background plugin. Before when I had the problem, arsondpi suggested this:

"...get rid of height:100%; in your #content .container
scrollbars are added cause #content has a height 100% of your page and #content .container has padding and (again) a height 100% of your page."

It worked wonderfully, although I have to admit I don't totally understand what the root of the issue was. I've continued to develop my site further, and all of a sudden, I'm having the same issue again - a vertical scroll bar that shows just a bit of white screen beyond the background image at the bottom. I've scoured my css, using firebug, for clues, but once again, am not seeing the issue. All I have in my content.container is padding 0...

Here is my site. Once again, anyone who has better understanding of this that sees the problem, I'd be so appreciative. Thank you.

7 / 2009-08-20 19:45:24   

steven, the only place I see a scroll bar is on the #card div

  1. You can get rid of that by changing the height to 100px or adding a overflow: hidden; rule, yeah?
7 / 2009-08-20 19:46:29   

don't know what went wrong with my post there but you get the idea ;)

sas_steven / 2009-08-20 19:48:40   

Interesting, I'm not getting a scroll there, but I know the content is a little tight... maybe at a different resolution it is too much for the size of the box?...

Thanks for the heads up, I will have a look at that.
Anyone else seeing the scroll bar for the background image?

sas_steven / 2009-08-24 20:03:09   

I doubt if anyone will have the same exact problem, but just in case, I found the issue:
My 'content p' was styled with a bottom padding of 12px, which is what was giving the scroll bars and extra bit of white below the full browser background.
Also, 7, I checked on a 1024x768 screen, and the scroll bars were popping up on my #card div. So I put in an overflow: visible in the css, and it cleared it right up. So I appreciate you pointing that out to me.

memoriesofnam / 2009-09-08 07:11:19   

Hey guys, did someone end up releasing a template or plugin for this? I noticed those of you who were having problems seem to have it working now?

I've been through the thread several times and still tearing my hair out. Will post the code and link if there's not a template available..

Thanks in advance!

arsondpi / 2009-09-08 08:27:50   

full-browser background plugin.

memoriesofnam / 2009-09-08 11:34:50   

Thank you arsondpi!!! Much appreciated :)

sophie_de_mau / 2009-09-08 20:31:20   

I try the full background plugin but it the doesn't appear in the Exhibition Format
what can I do?
thanks

arsondpi / 2009-09-08 22:22:08   

This is not an exhibition plugin. Read the DO_ME_FIRST.html file from the download above.
:-)

cursini / 2009-09-09 17:13:45   

no way! I did exactly like DO ME FIRST but no sucess!

any help?

very thanks friends.

cursini / 2009-09-09 17:32:13   

ok, ok!
the great new jquery.js!
amazingly perfect now.

very very thanks to indexhibit community!!

and keep walking, friends!! :-)

sophie_de_mau / 2009-09-09 19:04:59   

ok I missunderstood but still, it doesn't work even if I followed th Do me first. any Help...
www.mrcandco.com

gbodziak / 2009-09-15 08:10:42   

Hello, after reading and trying to understand it still doesnt work, could someone help me please. www.mrcandco.com

arsondpi / 2009-09-15 09:28:50   

Hello -
...where's the js file?

gbodziak / 2009-09-15 09:57:46   

that's right, where was it. lte see if it works now
thanks

gbodziak / 2009-09-15 09:59:26   

no luck so far.

gbodziak / 2009-09-15 10:03:51   

my mistake.
thanks for your help

moreismore / 2009-09-18 11:03:35   

Hello,

First message...

Thank you for this plugin it works great!!!!
Now I have to chosse the proper backgrounds for my site...

Just important notice: people UPGRADE to j-query 1.3...

And it works fine

Take care.

herrjaapmans / 2009-09-20 09:56:27   

Yep,

Updated to jquery 1.3.2.
And it worked...

Thanks, looks pretty swell

definingform / 2009-09-22 07:56:54   

Hi,

Maybe a dumb question. Would it in any way be possible to use this plugin with the random background image plugin?

I'd love to pair those two. I'm using the random image on my frontpage, and I'd love them to scale instead of tile...

http://definingform.com

Any ideas?

Thanks! :-)

definingform / 2009-09-22 19:03:33   

Hi,

So now I'm using the excellent full-background plug and it works really well. Now I would just love to be able to load random images into this plugin.

Anyone has any idea how to do that?

Here's my site; Definingform

Thanks in advance.

:-)

SludgeDesign / 2009-09-23 07:37:18   

uff..
hi guys.. you are my last hope

I'm using the 'full_background_plgin' but it doesn't work with me.. I followed each point of the instructions, i upgraded the Jquery file.. but still doesn't work..

the prev of the site is HERE

please save me.
best
federico

arsondpi / 2009-09-23 08:37:44   

Review all the steps in the DO_ME_FIRST.html file.
From a quick look it seems that you haven't included full_background.js.

SludgeDesign / 2009-09-23 08:59:56   

Ok I did it.. but it doesn't work..

full_background.js is in the 'site/js' folder

I tried to modify a #menu parameter in the css but any change happened.. maybe the css I changed is wrong.. I used the one in the 'site/sample/' folder called style.css

arsondpi / 2009-09-23 09:06:22   

Please (!!!) review all the steps in the DO_ME_FIRST.html file.
You haven't included full_background.js in the index.php file.

SludgeDesign / 2009-09-23 09:26:45   

mmmh.. i'm so sorry..

when you say:

and replace it with this
script type='text/javascript' src='%baseurl% %basename%/site/js/full_background.js'

i write something like this for the src:
src='http://www.federicopascali.it/ndxz-studio/site/js/full_background.js'

and i 've to make all this changes in the index.php file inside the sample folder

is it right?

SludgeDesign / 2009-09-23 09:43:32   

look THIS

arsondpi / 2009-09-23 10:06:12   

Your source code shows no evidence whatsoever that you're applying the necessary changes for the plugin.

You've applied the css code which is good.
You haven't done any changes to the index.php file of your theme...
I hope you've remembered to upload the index.php file.

Maybe if you ask a friend to help you out or start fresh... I don't know.

SludgeDesign / 2009-09-23 10:15:08   

That's bizarre..
however.. thank you very much for your patient!!!

I hope you've remembered to upload the index.php file

yes I did :)

It remains only one question in my mind:
whch is the 'index,php' file? I used the one inside sample folder but there are many..

arsondpi / 2009-09-23 11:13:16   

Federico you're using the eatock theme. You know what to do...

definingform / 2009-09-23 11:31:19   

My friend successfully merged the full background plugin with the random image plugin. If anyone is interested i can post it for you.

See it in action here; Definingform

SludgeDesign / 2009-09-23 13:34:03   

I don't know..
I used a script by a friend of mine directly on the eatock css (HERE).. and it is cool but it's not what i want.. for istance the same bg remains even if you load another page from the main..

however it's like my index.php it's not editable!
I assure you, the full_background.js is in the html of index.php but nothing happens

This thread has been closed, thank you.