Использование CSS с фоновым изображением/логином

В настоящее время я пытаюсь изменить экран входа в систему для веб-приложения. На данный момент у меня есть приглашение для входа (пользователь & пароль) в определенном месте на странице, чтобы оно соответствовало фоновому изображению. Сейчас это изображение установлено на 1024x768.Использование CSS с фоновым изображением/логином

Что мне было интересно, есть ли способ, чтобы фон автоматически масштабировался в зависимости от собственного разрешения пользователя, когда логин появился в правильном месте? Я не уверен, что это возможно, но подумал, что у кого-то может быть несколько советов.

источник

2010-10-25 Aaron

Итак, вы хотите, чтобы изображение всегда заполняло экран? –

@Sam Да, это идея. Это кажется разумным? – Aaron

Честно говоря, я бы не стал. Я считаю, что вы можете это сделать, поставив абсолютный позиционный div с изображением на переднем плане и установив значение z на обратную сторону страницы; Тем не менее, вы получите несколько забавных растяжек. –

Я сделал решение jsFiddle, которые могут пригодиться: Click here to see background-resizing at work

Он работает с JQuery, и я заметил больше всего кода, так что вы можете понять, как это работает. Вы сравниваете соотношение сторон изображения и окна браузера, посмотрите на разницу, а затем измените размер или высоту, основываясь на сравнении пропорций. Css также стоит посмотреть.

Я протестировал его в Firefox и IE (7/8), но изменение размера jsFiddle немного затруднено в IE.

Удачи вам!

Update:

I've made an updated jsFiddle here.

В этом случае окно сообщения (в вашем случае LoginBox) является позиционируется абсолютно с percentual смещением к верхней и правой. Я также дал ему процентную ширину/высоту, хотя это может быть необязательно/требуется. Но вы можете настроить это, чтобы увидеть, как поле ведет себя с разными размерами окон.

источник

2010-10-26 08:38:56

Спасибо за ваш ответ. Это определенно очень аккуратно. Я попытался поиграть с этим, заменив изображение, чтобы увидеть как это работает. Похоже, что div сообщения больше или меньше посередине. Моя единственная проблема заключается в том, что, поскольку наш логин расположен справа от правой стороны, я не уверен, правильно ли это будет правильно, если окно отличается от другого Посмотрите, что я имею в виду? – Aaron

Это зависит от того, как он позиционируется. Вы можете использовать абсолютные или процентные значения для размещения div. Кроме того, вы можете плавать div вправо, а затем использовать margin-right, чтобы дать ему немного смещение. Многие способы решить эту проблему. –

Прохладный, если я отправил образец изображения, включающий, где будет проходить вход, вы сможете направить меня на который является лучшим вариантом? Дайте мне знать, если это будет нормально отправить. . – Aaron

Использование CSS с фоновым изображением/логином

ответ

Смежные вопросы