Using CSS with background image/login

views:

answers:

Using CSS with background image/login

Currently I'm trying to edit a login screen for a web based application. As of now, I have the login prompt (user & password) at a particular place on page so that it corresponds with the background image. Right now this image is set to 1024x768.

What I was wondering, is there a way to have the background automatically scale depending on users own resolution while have the login appear at the correct location? I'm not sure if this is possible but thought someone might have some advice.

I've made a jsFiddle solution that can come in handy: Click here to see background-resizing at work

It works with jQuery, and I've commented most code so you can understand how it works. You compare the aspect ratio of the image and the browserwindow, look at the difference and then resize the width or height, based on how the aspect ratio's are comparing. The css is also worth a look.

I tested it in Firefox and IE(7/8), but jsFiddle resizing is a bit buggy in IE.

Good luck!

Update:

I've made an updated jsFiddle here.

In this scenario, the message box (in your case the loginbox) is positioned absolute with percentual offset to the top and right. I also gave it percentual width/height, although that might not be neccesary/wanted. But you can tweak this to see how the box behaves with different window sizes.

Justus Romijn 2010-10-26 08:38:56

Thanks for your reply on this. This is definitely really neat. I tried playing around with this by replacing the image to see how it worked. It looks like the message div is more or less in the middle. My only concern is that since our login is positioned off towards the right side, I'm not sure if this will position correctly when window is a different size. See what I mean?

Aaron 2010-10-26 18:31:52

It depends on how it is positioned. You can use either absolute or percentual values to position the div. Also, you can float the div to the right, and then use a margin-right to give it some offset. Many ways to solve this.

Justus Romijn 2010-10-27 12:04:50

Cool, if I sent a sample image that includes where the login goes would you be able to direct me on which is the best option? Let me know if it would be okay to send. Thanks again.

Aaron 2010-10-28 05:47:06

@Aaron Can't you put it on a server somewhere and give me the url? Then, if other people want to check it, they can use that image too. Or include it in your question.

Justus Romijn 2010-10-28 07:22:00

Yes, that's a better idea. I uploaded it here and you can see where the login portion would be located. http://queencitytech.com/dev/background-login.jpg

Aaron 2010-10-28 18:16:02

@Aaron Check the updated answer to see if that is what you want to achieve.

Justus Romijn 2010-10-29 08:08:39

I can see the update although the message box does appear to move when the screen is adjusted. While you can't tell with that image I posted, there will actually be other images in the center. Therefore by allowing the message box (loginbox) to move itself, will eventually end up over the top of the images. Is there anyway to get around this? If not, I can understand

Aaron 2010-10-29 20:25:21

Than you can change the positioning to absolute (i.e. left: 600px, top: 200px, width: 300px; height: 200px;), but it will only look good for a certain amount of screen-resolutions. When the resolution is smaller, the loginbox will move out of the viewport.With this percentual approach, the overlap of the center image will appear with resolutions below 800x600 which practically don't exist anymore.

Justus Romijn 2010-10-30 08:20:34

Ok, that's what I thought. Sounds like it would just be best to optimize it for 1024x768 since this seems most common. Anyway, I really appreciate your help with this. Thanks again.

Aaron 2010-10-31 13:53:05

ansaurus

tags:

views:

answers:

Using CSS with background image/login

related questions