Image as text input

  • Aliniuz
  • Born
  • Born
  • Aliniuz
  • Posts: 2

Post 3+ Months Ago

Hey!

Hope you help with my problem. :)
I know a input text can be stylized via CSS. But I created an image, the whole input, how would I like it to be and I want to use that image as a input text.

How can I do such a thing?
Thanks in advance.
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13504
  • Loc: Florida

Post 3+ Months Ago

You can apply the image as a background for an <input> element and set the width/height for the <input> to match that of the image.

Code: [ Select ]
input.mytext
{
background-image: url('my-image.png');
width: 100px;
height: 16px;
}
  1. input.mytext
  2. {
  3. background-image: url('my-image.png');
  4. width: 100px;
  5. height: 16px;
  6. }


Code: [ Select ]
<input type="text" class="mytext"/>


If you're not aware, this could look pretty ugly for visitors who browse with larger fonts as their default (of which you're unable to force changes) if you used a fixed-size image that would need a specific width or height.
  • videoediting-direct
  • Beginner
  • Beginner
  • videoediting-direct
  • Posts: 53
  • Loc: United Kingdom

Post 3+ Months Ago

input.loginbg
{
background-image: url(Images/LoginPage.jpg);
height:148px;
width:100px;
}
  • Aliniuz
  • Born
  • Born
  • Aliniuz
  • Posts: 2

Post 3+ Months Ago

I tried, without any succes.
http://stropdeviata.com/alin/input.htm
  • ScienceOfSpock
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1893
  • Loc: Las Vegas

Post 3+ Months Ago

well, your first problem is that you spelled background as "bakcground"

Post Information

  • Total Posts in this topic: 5 posts
  • Users browsing this forum: No registered users and 22 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.