Full background image

amarelo / 2008-10-30 12:35:43   

Hello,

I was wondering if is it possible to place a backgound image so that is scales accordingly to the size of the web page.

Can anyone give me an hint on this?

Thank you in advandce

Vaska A / 2008-10-30 12:56:31   

It's not easy...I've done it a few times...

LeslieOA / 2008-10-30 13:21:43   

Vaska's right.
This (non-Indexhibit) site does it with jQuery.

You could send them a polite note for pointers if your really struggling (though be patient).

Peace.

unttld / 2008-10-30 13:29:46   

Hi amarelo, this type of effect is really hard to achieve with HTML/CSS and seems to be best friends with the flash users. If you upload really big images you can set the width or height to 100% and make sure the outer layer is also set to 100% so you don't get any large margins showing through. This will only scale in one dimension. If you set width and height to 100% it will scale in both dimensions but will squish and stretch out of proportion.

Basically you want to center align the #content div vertically and horizontally, make it 100% wide and tall. the inner div needs to be a larger than #content and the image needs to have a minimum width and height. It's very tricky to pull off. Using a table will help to get vertical and horizontal alignments.

You could try something like this as well (I've done minimal testing on these):

  1. Javascript Method
  2. function adjustRatio(document.getElementById('theIdOfYourImage')); {
  3.   if(document.body.clientHeight < img.height) {
  4.     img.style.height = '100%';
  5.     img.style.width = 'auto';
  6.   }
  7.   else if(document.body.clientWidth < img.width) {
  8.     img.style.width = '100%';
  9.     img.style.height = 'auto';
  10.   }
  11. }
  1. CSS Method
  2. #imgId {
  3. /* Set the width dynamically depending on the width of the browser window */
  4. width:100%;
  5. /* dont enlarge the image more, than its initial resolution */
  6. max-width:1000px;
  7. max-height:765px;
  8. /* Set the height dynamically depending on the image's current width, keeping the aspect ratio */
  9. height:auto;
  10. }

These may require some bashing together but should be a good launching point. I'd defo like to know how you make with this, I always like seeing full window scaling images.

Best,
Derek

:)

LeslieOA / 2008-10-30 13:47:41   

Nice one Derek! Will have to try this out myself.

unttld / 2008-10-30 14:12:14   

Thanks. I had to do this for a client project that ended up not using it and just going for a 100% width based background image. So this stuff sorta sat on the back burner of snippet land.

Hopefully some of the Javascript Ninjas here can make good use of it.

vandaan / 2008-11-29 21:13:04   

Hey you guys,

I see this is inactive for a while now. I'm trying to wash this piggy but can't seem to get it to work... Vaska you said you pulled this off couple'o times? Any rockstar here with a solution?

Tried to add 100% width in the backgrounded plugin php file as well as the index.php in the plugin folder. I'd like the background images to fill the screen, even above their native resolution, ideally proper aspect ratio. (both generic bg images as for the bg-plugin).

Hope to hear from you guys.

arsondpi / 2008-11-30 19:19:49   

Check this similar thread - and this link posted by Vaska on that thread.
I've spend some time trying to read through the js but I can't do it on my own.
@ Vandaan - if you can help out understanding basics of this I'd be greatful - otherwise I'll ask some programmer to brake it down for me in the future...
@ unttld (Derek) - the CSS method works with max-height/max-width. Of course, once again, IE doesn't get these... :-( So How can one integrate indexhibits background image to theIdOfYourImage in your js (since the background image is applied to the body tag)?

vandaan / 2008-12-01 12:12:13   

Arsondpi I've read the article, it's not quite what I have in mind. I found a bunch of tutorials on the web on howto get fullscreen aspect ration maintaining background images on your website, javascripted and css.

like this one

The thing is if I'd make my website completely hardcoded I'd pull this off. But get indexhibit to do this for me is more fun right...

I'm no .js rockstar, havn't got the slightest idea where to put and/or how to implement (other than linking to) the script to get fullscreen background images for both the background-image-per-article and the backgrounded-exhibition function indexhibit offers (these are the two I wish to apply this to).

Vaskas example of the years ago site has the proper effect, but only in the sense of random image background, nice site though...

any clues on this?

Vaska A / 2008-12-01 12:16:58   

We've been giving you clues. I'm sorry, but this is not how the forum works. You have to TRY before we can do much for you on this kind of thing. We aren't just going to write it for you.

This is a tiny project and we do not have the resources to do this for you.

Please have a read of the forum rules...

vandaan / 2008-12-01 12:44:59   

Vaska, I think you got me wrong, i'm not asking you to make this for me. A little more intel on the js would be nice.... I think the purpose of a forum is to helpl out isn't it?

Vaska A / 2008-12-01 12:59:22   

We aren't helping people out around here?

vandaan / 2008-12-01 13:28:33   

Never mind vaska, this isn't going anywhere...

Vaska A / 2008-12-01 13:31:30   

That's what I'm trying to tell you. There are going to be better sources for trying to figure out how to do this. It has very little to do with Indexhibit pulling this off...pure html and css...and it's plenty of work.

I'm closing this thread...question has been asked many times before...

arsondpi / 2008-12-01 13:55:06   

The random background plugin already exists.

I was refering to to scalable (not resizable) background achived on that site... As I said, the js file does a few things at the same time and I can't tell which is which (the story of my life....)

I did the same search myself. The link vandaan provided is about normal scalable images and not scalable background images applied to the body tag (indexhibit works with background images applied to the body tag)

I just thought we could get this thread to work for some of us, medium-vices (Vaska seems to be juggling with many things concerning Indexhibit), to actually create such (crossbrowser) plugin for indexhibit. No hardcoding etc. This way we learn from each other and make something.

..me and my damn hippie ideas. :-P

This thread has been closed, thank you.