Forums » Customize

Create full-browser background img

pernin A
SWEDEN
2011-11-27 03:41:17
Permalink Post
 

I can't really see what's wrong, and with accumulated fixes and changes comes a moment when it's better to start again:

redownload full background zip from here and follow the instructions included, exactly -- it's working in my site with a similar setup (except I use jQuery.js 1.4.4 but that shouldn't make any difference

Nin
FRANCE
2011-11-27 08:01:30
Permalink Post
 

Hi Pernin,
Thanks for being...Present!

Actually you should forget my first-first posts because now, the situation is different.

First, you have to understand that I didn't create crazy codes that I put everywhere to try to make it work...
I just followed step by step the DO_ME_FIRST file that obviously don't work for me...

Now, I have to admit that the idea of erasing everything and doing it again was quite frustrating for me cause I did this around 150 times with no results but I listened to you and did it again:

So

-I dowloaded the full_background.js file and put it in my ndzx-sudio/site/js

Than

-I dowloaded the plugin.full_background.php file and put it in the ndzx-studio/site/plugin

  1. After that I went into my template index.php file and rewrite this line:
  2. < plug:backgrounder color='<%color%>', img='<%bgimg%>', tile='<%tiling%>' />

To that:

  1. < plug:backgrounder color='<%color%>' />
  2. < script type='text/javascript' src='<%baseurl%><%basename%>/site/js/full_background.js'></script> 

Then, after the < body> tag, I wrote this:

  1. < div id='the-background'>< plug:full_background /></div>
  2. < div id="wrapper">

After, right before my < /body> tag a add the < /div> tag.

Now, I'm my Style.Css file I have added that:

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

After all that, I still had no image on my home page so I went into my home page exhibition and dowload my picture via the dowloader function (my exhibition format is the "backgrounded" one)

And then (finally), my picutre appears!!!

Unfortunately, the problem is still the same, my image is not resized and even if it's look full size it is not and it's cropped at the bottom...

Here's my site

What the hell did I do wrong, I feel like I'm loosing some parts of my brain each day I'm trying to make this work proprely!!

Thx

A.

pernin A
SWEDEN
2011-11-27 10:44:56
Permalink Post
 

I would guess you need to just shift-refresh your brows a couple of times. My browser shows a beautifully well-placed full-background image ;)

Nin
FRANCE
2011-11-27 11:27:28
Permalink Post
 

Hu?? How come??

Wait, wait, wait wait, wait... I checked on my laptop (13" inch screen), on my friend's (15" inch screen) and on my iPhone (this one was the scariest yo', cut in the middle of the noze) and none of them displayed the entire image...

I guess I didn't express myself the right way ( sorry I'm french :- )...

-My question is:

Is there a way to make my image 100% height and 100% width on every browsers/size of screen?

Cause I don't know what size of screen and browser you use but in my original pic, the sweater of the guy takes more space than his face!?
(--> sorry can't find a way to link you to my pic)

Thx for your time.

A.

pernin A
SWEDEN
2011-11-27 12:28:18
Permalink Post
 

OK, don't apologize for your English, which is excellent ;) and, no I didn't understand you at first, as at that moment your background image was fixed and not in full mode. Let's see:

what happens is that the image is typically at 0.66 height/width proportion, equivalent to 600x400 px. The image resizes correctly and shows in full when the browser window's proportions allow it (doesn't matter if it's the actrual screen or just resizing the browser window).

If the window is wider, for example cinematic proportions of most modern screens, the width will resize to keep with the widening window, which means that some part of the image needs to be cut out in order not to deform the picture. This is done by default from the bottom up.

The same thing applies if the windows proportions vary towards a portrait. When height grows more in relation to width, beyond what the pictures original proportions allow, it must either cut somewhere or deform the image. The cut is done from the right in, which is why your iphone cuts the nose ;)

It's the same efffect as in cinemascope films in old television: some countries/channels would show the film in a letterbox format, with black bands above and below in order to show the full image, and others cut left and right in the image, covering the whole screen with image -- but sometimes you got people talking out of the frame ;)

After all this explanation, is there a solution? Well, no, not as such, unless you want a deformed image (a weirdly fat or thin face, depending on the device). Because most screens nowadays are cinematic wide-screen, you could choose a wide-screen image where the important parts are heavy on the left, so that the image degrades somewhat gracefully in 3:4 or portrait mobile things -- just doing a mirror version of your current image, so that the guy looks from the right will help a lot, especially with the iphone

Sorry about the news, but there's no magic, at some point you either have to crop the image or deform it. I guess cropping is the better choice, especially if you choose your image thinking of what will happen changing the window format

Nin
FRANCE
2011-11-27 13:00:37
Permalink Post
 

Pernin,

You have no idea how much time I spent, during these past 2 weeks, pulling out my hair to get something that was just:

NOT POSSIBLE!

This is so ashaming...

Thanks for this long explanation, now things get clearer...
I guess everybody knew this and that's why nobody was answering my dumb question...

Ok, well...
Sorry for having disturb uselessly.
I guess, that how we learn since it's my first website...

Thanks also for the compliment about my english (indexhibit helps a lot)

Cheers man...or woman!?

A.

pernin A
SWEDEN
2011-11-27 13:13:35
Permalink Post
 

er... cat :P

the only really dumb questions are the ones ones unasked, and this is far for dumb. I actually never had the need for thinking of it, if you hadn't asked it

cheers, good luck and have fun :)

Nin
FRANCE
2011-11-27 13:19:39
Permalink Post
 

Thanks! ;-) I won't give up!

mgushanasjr
UNITED STATES
2012-02-01 08:33:04
Permalink Post
 

I'm getting issues with my resizing where if the window width is smaller than the window height, it scales the image down instead of cropping it off the screen. I've been toying around with the JS script but I can't figure it out.

my site

the js

Tikstat
DENMARK
2012-02-14 12:58:26
Permalink Post
 

Hey

I ran the discribtion by Pernin A, and it dont work.

It shows the the picture but it doesn't resize it or crop it and the menu is behind the picture.

Please help :)

Webpage

motionlounge
UK
2012-02-16 19:42:38
Permalink Post
 

Hey guys I found that any faults can be caused by wrong js and php file for full image size. So make sure you have the right one from one of the Vaska's posts... I had used different one before (random one) and couldn't work at all.

Btw I'm newbie on this forum but have learned how to use Indexhibit from scratch...

I would appreciate if someone could give me a feedback as I can't test on any different resolution than on imac 27" and iphone. Please let me know if background and menu is show properly (don't mind the images yet as resolution is too big I know).

Any feedback welcome :)

my website

Thanks!!!

motionlounge
UK
2012-02-16 19:43:04
Permalink Post
 

Hey guys I found that any faults can be caused by wrong js and php file for full image size. So make sure you have the right one from one of the Vaska's posts... I had used different one before (random one) and couldn't work at all.

Btw I'm newbie on this forum but have learned how to use Indexhibit from scratch...

I would appreciate if someone could give me a feedback as I can't test on any different resolution than on imac 27" and iphone. Please let me know if background and menu is show properly (don't mind the images yet as resolution is too big I know).

Any feedback welcome :)

my website

Thanks!!!

motionlounge
UK
2012-02-16 19:46:30
Permalink Post
 

please delete my 1st post is wrong link >:

pernin A
SWEDEN
2012-02-20 02:37:02
Permalink Post
 

@motionlounge: please read the forum rules: you have no link back to indexhibit

Showing 251 - 264 of 514 posts in Forum > Customize > Create full-browser background img
 

You need to be logged in to post.