CODEWITHSUNDEEP
htmlcssinput
ishwr
ishwr

Reputation: 745

Using an image as an input text

Maybe this is an easy question, but I have been searching it for a long time and no luck. I simply need to use an image as an input type=text, instead of using the white box like normal. I tried to use background-image, but then the white is still there, only it has a background image. I don't need the white box. How can I do that?

Upvotes: 0

Views: 82

Answers (3)

Nick R
Nick R

Reputation: 7784

Like this:

HTML

<label for="test">Label here</label> 
<input type="text" name="test" id="test" placeholder="placeholder text" />

CSS

input[type=text] {
    background:url(http://placekitten.com/200/200) no-repeat 0 0; 
    border:0 none; 
    padding:4px 10px;
    color:#fff;
}

JSFiddle Demo

Upvotes: 3

badAdviceGuy
badAdviceGuy

Reputation: 2090

If I understand you correctly, this may be a solution. Applying a background image to a text input field: fiddle

html:

<textarea rows="10" cols="10" class="input">default text</textarea>

css:

.input {
  background-image: url(http://www.placehold.it/10x10);
}

Upvotes: 1

SaturnsEye
SaturnsEye

Reputation: 6499

Is this what you're after?

http://jsfiddle.net/HU8EE/

HTML

<div class="image">Text text text text text text text</div>

CSS

.image {
    width:400px;
    height:200px;
    background-image:url(http://3.bp.blogspot.com/-HX2iaDPwkhs/T6IEBoiufuI/AAAAAAAAAyQ/dtC9Sr268_k/s1600/doodle-525-cloud.jpg);
}

Upvotes: 1

Related Questions