CODEWITHSUNDEEP
htmlcss
Sudip977
Sudip977

Reputation: 65

Display image using css

I am trying to display image using css. But it is not display anyway. please help me. My code is :

//styles.css

table tr td span.glyphicon-eye-open{
	background: url("../images/private-eye.png") no-repeat;
}
//Register.php

<form method="post" id="form1">
<table align="center" width="45%" cellpadding="7px">
<tr>
<td><label>*</label><input type="text" name="email" placeholder=" Your Email" value="<?=$email?>"/></td>
</tr>
<tr>
<td><label>*</label> <input type="password" name="pass" id="passwordfield" placeholder=" Your Password" value="<?=$password?>"/>
<span class="glyphicon-eye-open"></span>  
</td>
  <tr>
<td><button type="submit" name="btn_Register">Register</button></td>
</tr>
</table>
</form>

I also has included 'link rel="stylesheet" href="../css/styles.css" type="text/css" /' in head with tags

Upvotes: 2

Views: 1882

Answers (4)

Rick Johnson
Rick Johnson

Reputation: 31

Change this line

<span class="glyphicon-eye-open"></span>

to:

<span class="glyphicon-eye-open">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>

DEMO

span.glyphicon-eye-open {
	background: url("http://previews.123rf.com/images/arnau2098/arnau20981503/arnau2098150300166/37873708-small-squares-background-color-Stock-Photo.jpg") no-repeat;
}
//Register.php

<form method="post" id="form1">
<table align="center" width="45%" cellpadding="7px">
<tr>
<td><label>*</label><input type="text" name="email" placeholder=" Your Email" value="<?=$email?>"/></td>
</tr>
<tr>
<td><label>*</label> <input type="password" name="pass" id="passwordfield" placeholder=" Your Password" value="<?=$password?>"/>
<span class="glyphicon-eye-open">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>  
</td>
  <tr>
<td><button type="submit" name="btn_Register">Register</button></td>
</tr>
</table>
</form>

Upvotes: 3

Sudip977
Sudip977

Reputation: 65

It now works fine using following css code :

table tr td span.glyphicon-eye-open{
background: url("../images/private-eye.png");
background-repeat:no-repeat;
/*width:50px;
height:50px;*/
padding-left:15px;
padding-right:15px;
padding-bottom:2px;

}

Upvotes: 0

Andrei Fedorov
Andrei Fedorov

Reputation: 3997

That is because your span has no height at all. Every span has no height until you insert some text in it or edit its height via CSS. For example, I've put some text in here, like so:

span.glyphicon-eye-open {
    background: url("http://beerhold.it/320/200") no-repeat;
    color: #fff;
}
//Register.php

<form method="post" id="form1">
<table align="center" width="45%" cellpadding="7px">
<tr>
<td><label>*</label><input type="text" name="email" placeholder=" Your Email" value="<?=$email?>"/></td>
</tr>
<tr>
<td><label>*</label> <input type="password" name="pass" id="passwordfield" placeholder=" Your Password" value="<?=$password?>"/>
<span class="glyphicon-eye-open">@@@</span>  
</td>
  <tr>
<td><button type="submit" name="btn_Register">Register</button></td>
</tr>
</table>
</form>

Upvotes: 5

Sidath
Sidath

Reputation: 98

try this one 

.glyphicon-eye-open{
background: url("../images/private-eye.png");
background-repeat:no-repeat;
}

Make sure your css is included

Upvotes: -1

Related Questions