Login popup with image can be resizable???

Technical Details

Forum version : #phpBB2
Position : Founder
Concerned browser(s) : Mozilla Firefox, Google Chrome, Internet Explorer
Who the problem concerns : All members
Forum link : hellasd3.4umer.com

Description of problem

Hello everyone,
once again i need your help for request that i have from my forum members.
We want a login popup window with an image as background, but the image be resizable to any screen resolution.
Until now i removed the button "dont show again message". And i put an image with the maximum resolution 800x600. To succeed a beautiful result i changed also the background image at a resolution 800x600.
I also realized that i can go beyond 800x600 resolution if i change a few things to overall_header.
More specific here is what i did to succeed the current result:

Code:

         <tr height="{LOGIN_POPUP_MSG_HEIGHT}">
            <td class="row1" align="left" valign="top">
               <div id="login_popup_buttons">
                  <form action="{S_LOGIN_ACTION}" method="get">
                     <input type="submit" class="mainoption" value="{L_LOGIN}" />
                     <input type="button" class="mainoption" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" />
                  </form>
               </div>
               <span class="genmed">{LOGIN_POPUP_MSG}</span>
            </td>
         </tr>

Close button removed...

Code:

<!-- BEGIN switch_login_popup -->
      var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH}, logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = true, logInBackgroundClass = false;
   <!-- END switch_login_popup -->

If i change logInPopUpWidth = "1600", logInPopUpHeight = "900" , i can make the pop up login to specific resolution.
Now my question is. Is anyway to put a bigger resolution image and when i resize the browser window the login popup background image also being resized and keeping the aspect ratio of the photo???
Please i need a solution budlly and i believe the solution is somewhere on the overall_header section.
Ange Tuteur if you can help me with your magic skills i would be great full.
Thank you in advance all the support team.

Hi @soamra,

The image is a background, yes ? In which case I'd recommend using the background-size property to resize the image. Add that property to your current rule, then adjust the value as necessary.

Yes the image is background. I add image using [img ] image here[ /img ] inside the login pop up on the administration panel.
Could you give an example how i will use the background-size property and how i add that to the current rule. I am noob on scripts.
Also will that resize the window of login pop up? For example if i put a background image that is over 800x600(1600x900) will the window be resized to the photo.
Also if i run the forum on a 1024x768 resolution screen will the pop up login window reduce the size of the image to the maximum resolution of the screen.
I hop you understand what i mean. Help please?

Wait, let's clarify. You said you used image tags, in which case the image would just be an image ; not a background. So for this image : Is it a background image, or a regular image made with the bbcode ?

I think is a regular image with bbcode... i went at Administration Panel -> General -> Forum -> Configuration -> Login Popup and enter this in the content part. [img ] my image [/img ]... I did that because i tried to use that code to css style ...

Code:

#login_popup{
background: url(LINK)!important;}

but doesnt worked

If you're only going to be using one image, use this CSS :

Code:

#login_popup img {
  width:100%;
  height:auto;
}

That'll resize the image to 100% of the login popup container.

Yes,i know that this is possible, i mean to resize an image to fit the size of login pop up window. BUT i want the window be resized on the size of the image and if the screen resolution is smaller of the login pop up window, then the pop up window AND the image inside, being reduced so to fit the browser window...
What i mean is i want the login pop up window to fill almost all the browser window. And also both image and the pop up window to change size when you change the browsers window size.
Something that happens to iframes with autoresize or with lightboxes.
For example if i put the pop up login window to a size of 1600x900, then a person with smaller resolution screen cant login because the login pop up window is oversized.
We want to put a big resolution welcome image on pop up login window and for members with smaller resolutions screens that pop up window(and also the image inside) to be resized so the member can see the login screen.
I hope to be understood now. I know that you can help us to find a solution to that.

soamra wrote:What i mean is i want the login pop up window to fill almost all the browser window.

Ooh.. why didn't you say that to begin with ?

See if this works :

Code:

#login_popup {
  position:fixed;
  left:0 !important;
  top:0 !important;
  width:100% !important;
  height:100% !important;
}

Nope ... i did that also ... doesnt work(i upload it to see it by yourself, check forum) .. the image and the window when you change the browser window do not autoresize.
Go here http://dimsemenov.com/plugins/magnific-popup/ and press the single image lightbox. Then change the size of your browser window. You will notice that the image always autoresize so to fit the browsers window.
That is the result we are looking for. But we want that with the login pop up window.

Actually, it is still taking up the whole screen. The only part that isn't is the inner table. Add this to your CSS :

Code:

#login_popup > table, #login_popup img {
  width:100% !important;
  height:100% !important;
}

That should adjust both the table and image.

I know that i really bother you , but that doesnt fixed anything. Justs reduces the image size to fit the window(check my forum again pls). The window doesnt autoresize.
Is that because the login pop up window has a fixed number of max resolution of 800x600??? Can we change that? Or is something else?

You made sure to keep this rule in your stylesheet, correct ?

Code:

#login_popup {
  position:fixed;
  left:0 !important;
  top:0 !important;
  width:100% !important;
  height:100% !important;
}

Mate once again you are the man... i removed that so i reentered that rule and all is perfect.
If you were close i would buy you a beer mate.
Once again THANK YOU!!!
So for all the members of forumotion.
If you want a resizable login popup window with a full width resolution image, here is the solution

Code:

#login_popup {
  position:fixed;
  left:0 !important;
  top:0 !important;
  width:100% !important;
  height:100% !important;
}
#login_popup > table, #login_popup img {
  width:100% !important;
  height:100% !important;
}

SOLVED!!!

You're welcome ^^

Topic archived

Have a good day.

P.S.
You can ship the beer via express.