Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Using a background image as a text field

Posted on 2010-08-31
10
Medium Priority
?
477 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
  • 5
  • 4
10 Comments
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
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 84

Accepted Solution

by:
Dave Baldwin earned 1000 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
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!

 

Author Comment

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

Expert Comment

by:Gurvinder Pal Singh
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:Gurvinder Pal Singh
Gurvinder Pal Singh earned 1000 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:Gurvinder Pal Singh
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

Industry Leaders: 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…
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
Suggested Courses

972 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