Back To Website Design Forum

Image as text input

  • Aliniuz
  • Born
  • Born
  • No Avatar
  • Joined: Aug 06, 2008
  • Posts: 2
  • Status: Offline

Post August 6th, 2008, 2:24 am

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.
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post August 6th, 2008, 2:24 am

  • joebert
  • Sledgehammer
  • Genius
  • No Avatar
  • Joined: Feb 10, 2004
  • Posts: 13458
  • Loc: Florida
  • Status: Offline

Post August 6th, 2008, 2:29 am

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.
Strong with this one, the sudo is.
  • videoediting-direct
  • Beginner
  • Beginner
  • No Avatar
  • Joined: Jul 28, 2008
  • Posts: 53
  • Loc: United Kingdom
  • Status: Offline

Post August 6th, 2008, 7:06 am

input.loginbg
{
background-image: url(Images/LoginPage.jpg);
height:148px;
width:100px;
}
  • Aliniuz
  • Born
  • Born
  • No Avatar
  • Joined: Aug 06, 2008
  • Posts: 2
  • Status: Offline

Post August 16th, 2008, 11:28 am

I tried, without any succes.
http://stropdeviata.com/alin/input.htm
  • ScienceOfSpock
  • Mastermind
  • Mastermind
  • User avatar
  • Joined: Jul 06, 2004
  • Posts: 1890
  • Loc: Las Vegas
  • Status: Offline

Post August 18th, 2008, 1:09 am

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

Page 1 of 1

Post Information

  • Total Posts in this topic: 5 posts
  • Users browsing this forum: No registered users and 79 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
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.