depending what type of image you mean, there are a few ways this could be done, is the image part of the layout or a seperate image that has image tags.?
Input boxes, lessee, they belong in a FORM... so if the form has a background image, sure, the input can sit right over it. Show picture of what you are talking about? But yes, it can be done, and not difficultly. ...Is that a word?
You can either use FLASH to do this or simply create a HTML style form with a background image. It can also be done via CSS and DIVs...
Not at all. Just use background-image for the "form" attribute and add padding=10, text-align:center Otherwise just put the form inside a DIV tag with background-image I use this all the time, it looks great with the right image. You can even use background-image on the actual text-field. It's not too complicated at all. Hope that helps.
Safari has issues with backgrounds and input/text fields. In fact, there's something somewhere that some browser on some OS just won't do. Roger Johanssen has a great test at 456bereastreet.com but I forget the name of the article... likely styling form controls or something. If you have an input, you are using a FORM. If you are not using a form, you have no business playing with inputs. Unless your page is complete and utter garbage instead of HTML. Which many web pages are, and they even look like they work! I'll amend that to 10(units) not 10. Prolly you meant px.
It's certainly possible. Check out this solid edge page to see it in action. The divs are lined up with the background image on the opt-in form. It's true that safari put these slightly out of whack compare to most other browsers, so keep an eye on that.
I really want to know how to do this as well All of what has been said makes no sense to me though - is it just a simple html thing (sorry for being such a newbie)
It's simple to do... Here is the full code: <html> <head> <title>Untitled Document</title> <style type="text/css"> <!-- form{background-image:url(http://google.com.au/intl/en_au/images/logo.gif); text-align:center; background-repeat:no-repeat; padding:10px; height:88px; width:258px; font-family:Tahoma; font-size:14px; color:#000000; } --> </style></head> <body> <form id="form1" name="form1" method="post" action=""> <strong>Your Form </strong><br /> <br /> <input type="text" name="textfield" id="textfield" /> <label> <br /> <input type="submit" name="button" id="button" value="Submit" /> </label> </form> </body> </html> Code (markup): Let me know if that clarifies things.
The solid edge one uses absolute positioning, but done smart enough that the text doesn't shift when I do text-enlarge (nice). Lilac's technique is fine but PLEASE everyone make your forms VALID. You need a block element as the direct child of the form. So, wrap all those labels and inputs in a fieldset or a div or something. Don't wrap your inputs inside your labels cause WindowEyes has a bug with it and won't read them : ( And put text in your labels, using for="" <form id="form1" method="post" action=""> <fieldset> <legend>Your Form </legend> <label for="textfield">Name!</label> <input type="text" name="textfield" id="textfield" /> <input type="submit" name="button" id="button" value="Submit" /> </fieldset> </form> Code (markup): fieldset { border: 0; } if you don't want it to show. legend { font-weight: bold; } if you want it bold labels can be floated left if you want them to the left of inputs (which, being inline will just wrap alongside so long as the form is wide enough). Otherwise they'll just sit above the input.
Maybe you would like to place the image inside the input, as an bg image: Here is the code: <html> <head> <style> .someclass { background-image:url(pic.JPG); } </style> </head> <body> <input type="text" class="someclass" name="text"> </body> </html>
I am currently developing a script where I can use this. And this thread has helped me a lot: thanks everyone for your responses!