View Full Version : having a text field over an image

11-12-2011, 11:39 AM
I have spents hours trying to figure out how to do this but it seems I have sercum to loss.

I made a form in Photoshop where one has to enter there password. The password area is a curved rectangle with a reversed gradient colour. I have used the slice tool on it ready for dreamweaver.

In dreamweaver how do I make the area of this rectangle an input field to type in a password. I don't want a textbox in this area as I want the background to remain the same, I just want people to type a password in this area.

Someone told me I had to do something along the lines of getting the bounds of the rectangle in Photoshop and some how setting the bounds as a text field. But I have no idea how to do this or if this is even the way to do it.

Any help would be greatly appreciated.


I have the following code which I spent ages with fiddiling but my only problem now is that the textbox keeps moving depending on the size of the browser. Is there a way to keep the textbox in the same place?

<style type="text/css">
.csstest {

position: absolute;
right: 75;
left: 170;
bottom: 205;
background-color: transparent;
border: transparent;


<div class = "csstest">
<input type="text" class ="csstest" name"csstest" id="csstest">

11-12-2011, 01:22 PM
You can set a background image on your text input through CSS. Here is a guide to forms/images and CSS; http://www.picment.com/articles/css/funwithforms/

The reason it moves is the use of absolute positioning. This either takes it's co-ordinate reference from the top left hand corner of the screen or a parent relatively positioned div tag. Suggest you wrap your design in a relative div and take your positioning from that. Better still, build your whole layout using relative or natural positioning.