Putting login control inside an image

Get Started
1

Hi all.

I want to design my own custom looking login control, that will apear on the right of my html page. I am new to this and having difficult time understanding how can i embedd the login control code (form code) inside that image ?

My guess is to use position:relative and then adjust the width etc of the login form code so that it appears inside the image. But what is the practice of web designers if they are given this task ?

Kindly guide me

2

You are probably better off creating your form first, then applying the image to it as a background image. E.g.


form {background: url(myimage.gif);}

That’s a very basic example, with a lot of options available. Trying to place a form over an image with positioning etc. is asking for trouble, and pointless if the image is just for decoration. A decorative image shouldn’t be in the HTML, but supplied via CSS.

Feel free to provide a link or some code for us to help with. :slight_smile:

3

Dear Sir,

thanks alot for the prompt reply. I have taken this sample from google images just to give an idea

Sir, now in this case, will i use style position etc parameters to adjust the username/password prompt on this image ?

basically i wanted to know how professionals do it ? do they just draw a image in photoshop etc and position it using css ?

Kindly guide me, it will help me to better code

4

Yes. Make your form first, and then make the image and set it as a background image on the form. :slight_smile:

We can help you more with this if you want, but perhaps show us your form, and maybe a link to the image you want to use.

5

Sir kindly use the sample i have given before.

See in that image, we have a place for username/password. Now shall i take the below steps ?

  1. lets say i draw the same image as it is in photoshop
  2. now in order to take username from the location shown in image, i need to adjust the css position parameters ?

Sir kindly use the diagram that i have posted before

6

That image is no use, because it includes a picture of the form. The form needs to be done with HTML, not with Photoshop, so remove the form bits from the image. Create a normal form in HTML, style it as you wish, then place just the paper image behind it.

7

Thanks alot sir for guidance.

I am really sorry for the late reply

8

No problem! How is it all going?