Using a background image as a text field

I am trying to use a background image as a text field to make it look a bit nicer than the regular one. The problem is that I just can't seem to get the text in the middle. Take a look at the attached image to see what I mean...  text alignment
jonofatAsked:
Who is Participating?
 
Dave BaldwinConnect With a Mentor Fixer of ProblemsCommented:
There are several things you can do.  The easiest is to add some padding or margin to the top of the element.  style="padding-top:12px;" for example.
0
 
Gurvinder Pal SinghCommented:
<<I am trying to use a background image as a text field>>
Did you mean that you are trying to put an background image in a text field?
then try
<input type="text" Style="text-align: center;background-image:image-path.jpg;">
0
 
jonofatAuthor Commented:
Hi. Thanks for your suggestions. I haven't had a chance to try them out yet but I will definately do it tonight and get back to you. Thanks for your patience.
0
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
jonofatAuthor Commented:
Hi there. Unfortunately neither of your solutions worked... :(
0
 
Gurvinder Pal SinghCommented:
ok...but please confirm if my understanding of the question is correct as i asked in my first reply.
0
 
jonofatAuthor Commented:
OKay, I don't want us to cross wires here. I am trying to have an nice looking text box with rounded edges as you can see in my screen shot. I have this but the text is too high. I am trying to get it a bit lower but I can't. My CSS looks like this

                     color: #333;
      font-size:9pt;
      background-image: url(../images/singleline.png);
      background-color: #701816;
      font-family: Arial, Helvetica, sans-serif;
      background-repeat: no-repeat;
0
 
Gurvinder Pal SinghConnect With a Mentor Commented:
add this also

padding-top:5px;

you can adjust the pixel value as per requirement
0
 
jonofatAuthor Commented:
I tried that, it doesn't work, all it does is make a gap above the text box.
0
 
Gurvinder Pal SinghCommented:
please try again, this should do. Are you giving these styles to textbox only right?
padding: 10px 10px 10px 10px;

try this also
<input type="text" style="height: 10em; vertical-align:middle;" size="50">
0
 
jonofatAuthor Commented:
Okay, wait. For some reason when I add padding to the bottom as well it fits perfectly. Strange. Anyway, since both of you guys helped, I will have to split the points. Thanks! It looks great now!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.