Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 478
  • Last Modified:

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
0
jonofat
Asked:
jonofat
  • 5
  • 4
2 Solutions
 
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
 
Dave BaldwinFixer 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
 
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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 SinghCommented:
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

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 5
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now