Solved

Using a background image as a text field

Posted on 2010-08-31
10
474 Views
Last Modified: 2012-06-27
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
Comment
Question by:jonofat
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 4
10 Comments
 
LVL 40

Expert Comment

by:gurvinder372
ID: 33570916
<<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
 
LVL 83

Accepted Solution

by:
Dave Baldwin earned 250 total points
ID: 33571217
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
 

Author Comment

by:jonofat
ID: 33584138
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
Independent Software Vendors: 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!

 

Author Comment

by:jonofat
ID: 33589141
Hi there. Unfortunately neither of your solutions worked... :(
0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 33589173
ok...but please confirm if my understanding of the question is correct as i asked in my first reply.
0
 

Author Comment

by:jonofat
ID: 33589221
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
 
LVL 40

Assisted Solution

by:gurvinder372
gurvinder372 earned 250 total points
ID: 33589253
add this also

padding-top:5px;

you can adjust the pixel value as per requirement
0
 

Author Comment

by:jonofat
ID: 33589378
I tried that, it doesn't work, all it does is make a gap above the text box.
0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 33589477
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
 

Author Comment

by:jonofat
ID: 33589504
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

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!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…

734 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question