Pretty input boxes :) 1

[Lochness30]

I'm not sure if this is a html or even a javascript question, but does anyone know how I can put my input fields on a picture? ie when you go to paypal.com the account login screen is on a metalic looking background.

Any help would be appreciated!

 

[vacunita]

That would be HTML more precisely CSS and HTML and very basic html at that.

Something like this should work for you:

<div style="background:URL('path\to\file.jpg') width:100px; height:250px;">
<form ...>
<input type=text>
</form>
</div>

Where file.jpg is the image that has the background you want to place your text boxes on.

For more help on html and css try : forum215


----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[RhythmAce]

There are a few ways you can do it but an easy way is to use a table. I looks like they used a table with one column and two rows for the block. In the top row they used a darker background color than in the lower row. A table can take a backgroung color or image just like a full page. You can also put anything else in a cell of the table that you would on any other page.

 

[vacunita]

I won't get into the "Why tables should not be used for layout of a web page" discussion.

However I will say that Pay Pal does not use a table anywhere on that page. If you care to look in there code you'll see there are no tables being used.



----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

 

[Lochness30]

Thanks Vacunita! That's exactly what I was looking for. For anyone trying this, the code seemed to only be missing a semi-colon (before the "width" text. It just showed nothing until I put the semi-colon in.

<div style="background:URL('images/login_bg.jpg'); width:100px; height:250px;">

As for RhythmAce's suggestion of the table. I had actually done that before (to make rounded corners) on a login section, but it was a huge pain and it never works out just right.

 

[RhythmAce]

I agree. Tables are somewhat old school and it seems hard to find scripts these days that don't use style sheets. I have a website that makes heavy use of tables. I know I need to switch over but never got used to doing it any other way.

 

[southbeach]

FYI

You can apply the style directly to the input field itself. There is no need to wrap it within an <div> ... Try something like

<input name="test" style="background:URL('images/links_bg.gif');" >

 

[vacunita]

The semi colon was my bad forgot to place it there. Glad you figured it out there Lochness.

As for the applying style sheets to the actual text box, well it can be done, but if you are going to have several textboxes or other input objects you might as well wrap them in a div and style that.



----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.